/* ============================================================
apple-theme.css — Surcouche « style Apple » pour louelafête
À charger APRÈS css/style.css. Ne modifie aucune classe ni JS :
uniquement l'apparence (boutons pilule, coins arrondis, filets
fins, nav sombre translucide, rythme clair/sombre, typo serrée).
Palette conservée : violet #5b54c9, or #f5a623, nuit #232135,
crème #f6f4f0, parchemin #f5f5f7.
Pour revenir en arrière : retirer la ligne de ce fichier.
============================================================ */
:root {
--radius: 18px; /* coins arrondis façon Apple */
--fond-clair: #f6f4f0;
--parchemin: #f5f5f7; /* parchemin Apple pour les sections claires */
--hairline: #e0e0e0; /* filet fin */
/* Autorise l'animation d'une hauteur jusqu'a `auto` (necessaire pour que
la reponse de la FAQ se deplie/replie en douceur — voir plus bas). */
interpolate-size: allow-keywords;
}
/* ============================================================
POLICES — portées depuis la maquette Claude Design :
titres en Bricolage Grotesque (caractère), texte en
Instrument Sans (sobre, proche de SF Pro).
Nécessite le Google Fonts ajouté dans le ;
si les polices ne chargent pas, Poppins reste en secours.
============================================================ */
body { font-family: 'Instrument Sans', 'Poppins', system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4,
.hero__title, .section__title, .pack__name, .how__num {
font-family: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
}
/* Exception : les petits titres-filets en majuscules restent en police de texte */
.reserver__cartes-titre { font-family: 'Instrument Sans', 'Poppins', system-ui, sans-serif; }
/* ── Filets fins partout (au lieu des bordures crème) ── */
.pack, .resa-carte, .reserver__fiche, .reserver__mini-recap,
.reserver__date-badge, .faq__item, .confiance__item,
.quiz__card, .avis__card { border-color: var(--hairline); }
/* ============================================================
BOUTONS — pilule intégrale, typo 17px, appui « scale »
============================================================ */
.btn {
border-radius: 9999px;
font-size: 17px;
font-weight: 600;
letter-spacing: -.374px;
padding: 12px 26px;
transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn:hover { transform: none; } /* on retire le saut ; Apple = appui */
.btn:active { transform: scale(.96); }
.btn--sm { padding: 8px 18px; font-size: 15px; }
.btn--ghost-clair { border-width: 1px; }
.nav__cta { border-radius: 9999px; }
.cta-mobile__btn { border-radius: 9999px; }
/* ============================================================
NAVIGATION — barre sombre, translucide (verre dépoli)
============================================================ */
.nav {
background: rgba(35,33,53,.86);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: none;
}
.nav__inner { padding-top: 10px; padding-bottom: 10px; }
.nav__logo img { filter: brightness(0) invert(1); height: 30px; } /* logo en blanc */
.nav__links a { color: #f6f4f0; font-size: 13px; letter-spacing: -.12px; }
.nav__links a:hover { color: #fff; }
.nav__burger span { background: #fff; }
/* ============================================================
HERO — titre plus grand et resserré (« Apple tight »)
============================================================ */
.hero { min-height: 92vh; }
.hero__title { font-size: 64px; line-height: 1.05; letter-spacing: -1.4px; }
.hero__subtitle { font-size: 23px; line-height: 1.4; }
.hero__kicker { letter-spacing: .2px; }
/* ============================================================
EN-TÊTES DE SECTION — tracking resserré
============================================================ */
.section__title { letter-spacing: -.6px; }
.section__lead { font-size: 21px; line-height: 1.4; }
.section__kicker { letter-spacing: -.2px; text-transform: none; font-size: 15px; }
.section__kicker::before,
.section__kicker::after { display: none; } /* on enlève puce + filet, style plus sobre */
/* ============================================================
RYTHME DES SURFACES — clair ↔ sombre, le changement de
couleur fait le séparateur (pas de bordures/ombres lourdes)
============================================================ */
/* Bande de confiance : reprise fidele de la maquette Claude Design.
Colonnes de texte a plat (pas de carte, pas d'ombre, pas de pastille
d'icone), fond parchemin #f5f5f7, grand interligne aere facon Apple. */
.confiance { background: var(--parchemin); border-bottom: none; }
.confiance__inner {
max-width: 1180px;
padding: 44px 28px;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.confiance__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
/* On neutralise le survol facon carte : la maquette ne bouge pas. */
.confiance__item:hover { transform: none; border-color: transparent; box-shadow: none; }
/* La maquette Claude Design n'affiche pas de pastille d'icone : on la masque
(purement decoratif, aria-hidden). Retirer cette ligne retablit les icones. */
.confiance__ico { display: none; }
.confiance__txt { gap: 4px; }
.confiance__txt strong { font-size: 17px; font-weight: 600; letter-spacing: -.374px; color: #232135; }
.confiance__txt span { font-size: 14px; letter-spacing: -.224px; color: #6a6880; }
/* Repli responsive : 2 colonnes en tablette, 1 en petit mobile. */
@media (max-width: 760px) {
.confiance__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding: 36px 24px; }
}
@media (max-width: 440px) {
.confiance__inner { grid-template-columns: 1fr; }
}
/* Galerie : redevient claire (au lieu du fond nuit) */
.galerie { background: #ffffff; }
/* Fondu doux sur les bords du ruban défilant (porté de la maquette) :
les photos apparaissent/disparaissent en douceur au lieu d'être coupées net */
.galerie__ruban {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.galerie .section__title { color: #232135; }
.galerie .section__lead { color: #6a6880; }
.galerie .section__kicker { color: #5b54c9; }
.galerie .btn--ghost-clair { color: #5b54c9; border-color: var(--hairline); background: #fafafc; }
.galerie .btn--ghost-clair:hover { background: #fff; color: #4a44ad; }
/* Comment ça marche : passe sur fond nuit (rythme Apple) */
.how { background: #2c2942; border-top: none; border-bottom: none; }
.how .section__kicker { color: #8b85e0; }
.how .section__title { color: #ffffff; }
.how__step h3 { color: #ffffff; }
.how__step p { color: #b0aec6; }
/* Numéros d'étapes : grands chiffres nus façon maquette (plus de pastille ronde) */
.how__num {
width: auto; height: auto;
background: transparent; color: #8b85e0;
font-size: 56px; font-weight: 700; letter-spacing: -1px; line-height: 1;
margin-bottom: 14px;
}
.how__step h3 { font-size: 21px; }
.how__step p { font-size: 17px; line-height: 1.47; }
.how .btn--ghost-clair { color: #8b85e0; border-color: #8b85e0; }
.how .btn--ghost-clair:hover { background: rgba(139,133,224,.14); color: #fff; }
/* ============================================================
RÉSERVER — repris fidèlement de la maquette Claude Design :
bande parchemin pleine largeur, en-tête aligné à gauche,
colonne date dans une carte blanche, calendrier épuré avec
jour sélectionné en pilule violette, chips violettes.
============================================================ */
/* Bande parchemin pleine largeur (la section était un bloc centré :
on élargit et on re-centre le contenu à l'intérieur) */
.reserver {
background: var(--parchemin);
max-width: none;
padding: 96px 24px;
}
.reserver .section__head,
.reserver__split { max-width: var(--max-width, 1140px); margin-left: auto; margin-right: auto; }
/* En-tête de section aligné à gauche comme la maquette */
.reserver .section__head {
text-align: left;
padding: 0;
margin-bottom: 44px;
}
.reserver .section__lead { max-width: 600px; }
/* ── Colonne gauche : le bloc date devient une carte blanche ── */
.reserver__date {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 24px;
}
/* Calendrier épuré : à plat dans la carte, sans ombre ni cadre.
NB : flatpickr insère le calendrier comme voisin dans .reserver__date,
pas comme enfant de .reserver__cal */
.reserver__date .flatpickr-calendar.inline {
box-shadow: none;
border: none;
background: transparent;
margin: 0 auto;
}
/* ── Calendrier GRAND FORMAT comme la maquette ──
flatpickr est figé à 307px de large : on le libère pour qu'il
remplisse la carte blanche, avec de grandes cases confortables */
.reserver__date .flatpickr-calendar.inline,
.reserver__date .flatpickr-calendar.inline .flatpickr-innerContainer,
.reserver__date .flatpickr-calendar.inline .flatpickr-rContainer,
.reserver__date .flatpickr-calendar.inline .flatpickr-days,
.reserver__date .flatpickr-calendar.inline .dayContainer {
width: 100%;
max-width: none;
min-width: 0;
}
.reserver__date .flatpickr-day {
max-width: none; /* les cases s'étalent sur toute la largeur */
height: 42px;
line-height: 42px;
font-size: 15px;
margin: 2px 0;
}
.reserver__date span.flatpickr-weekday {
font-size: 12px;
font-weight: 600;
color: #6a6880;
}
/* Ligne du mois : plus haute et plus lisible (« Août 2026 » façon maquette) */
.reserver__date .flatpickr-months { margin-bottom: 10px; position: relative; }
.reserver__date .flatpickr-current-month {
font-size: 17px;
font-weight: 600;
letter-spacing: -.374px;
padding-top: 6px;
}
.reserver__date .flatpickr-current-month .cur-month,
.reserver__date .flatpickr-current-month .flatpickr-monthDropdown-months {
font-weight: 600;
font-family: inherit;
}
/* Si le mois est un menu déroulant, on le fait ressembler à du texte simple */
.reserver__date .flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
}
.reserver__date .flatpickr-current-month input.cur-year { font-weight: 600; }
/* Jour sélectionné : pilule violette (au lieu du bleu flatpickr) */
.reserver .flatpickr-day.selected,
.reserver .flatpickr-day.selected:hover,
.reserver .flatpickr-day.startRange,
.reserver .flatpickr-day.endRange,
.reserver .flatpickr-day.selected.inRange {
background: #5b54c9;
border-color: #5b54c9;
color: #fff;
border-radius: 9999px;
}
.reserver .flatpickr-day.inRange { background: rgba(91,84,201,.12); border-color: transparent; box-shadow: none; }
.reserver .flatpickr-day.today:not(.selected) { border-color: #5b54c9; }
.reserver .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) { border-radius: 9999px; }
/* Flèches mois précédent/suivant : petits boutons ronds à filet,
alignés verticalement sur la ligne « Août 2026 » */
.reserver .flatpickr-months .flatpickr-prev-month,
.reserver .flatpickr-months .flatpickr-next-month {
width: 34px; height: 34px;
padding: 6px 0;
top: 0;
background: #fafafc;
border: 1px solid var(--hairline);
border-radius: 9999px;
}
.reserver .flatpickr-months .flatpickr-prev-month { left: 4px; }
.reserver .flatpickr-months .flatpickr-next-month { right: 4px; }
/* Bouton « Pas de date fixée ? » : pilule perle pleine largeur */
.reserver__date .btn--ghost-clair {
background: #fafafc;
color: #5b54c9;
border: 1px solid var(--hairline);
font-weight: 400;
}
.reserver__date .btn--ghost-clair:hover { background: #fff; color: #4a44ad; }
/* Répartition des colonnes identique à la maquette :
gauche 360-440px (calendrier), droite fluide */
@media (min-width: 900px) {
.reserver__split { grid-template-columns: minmax(360px, 440px) 1fr; }
}
/* ── Colonne droite ── */
.reserver__droite-titre { font-weight: 600; letter-spacing: -.374px; }
/* Cartes plus petites, comme la maquette : 3 par rangée au lieu de 2
(le minimum de 210px faisait basculer la grille à 2 colonnes) */
.reserver__cartes-grille {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 16px;
}
/* Rappel « choisissez une date » : carte blanche à liseré or (maquette) */
.reserver__droite-hint { background: #fff; }
/* Chips des cartes : violet pour les packs (au lieu du teal), gris à la pièce */
.resa-carte__chip { color: #6f66e8; }
.resa-carte__chip--piece { color: #6a6880; }
/* Rassurance caution : carte parchemin (au lieu du violet pâle) */
.reassure__card { background: var(--parchemin); border-color: var(--hairline); }
/* FAQ : parchemin, items sans carte (filet du bas façon Apple) */
.faq { background: var(--parchemin); max-width: none; padding-left: 24px; padding-right: 24px; }
.faq .section__head, .faq__liste { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq__item {
background: transparent;
border: none;
border-bottom: 1px solid var(--hairline);
border-radius: 0;
padding: 6px 0;
}
.faq__item summary { font-size: 19px; padding: 22px 0; }
.faq__item p { font-size: 17px; line-height: 1.47; }
/* Marqueur « + » qui pivote doucement en croix a l'ouverture (repris fidele
de la maquette Claude Design). On utilise un vrai (.faq__marqueur)
plutot que le pseudo ::after : dans un en display:flex le pseudo
est un flex-item et `transform` y est ignore, alors qu'un element reel
tourne parfaitement. Le est vide dans le HTML : sans cette surcouche
il reste invisible et c'est le '+/-' d'origine (::after) qui s'affiche. */
.faq__item summary::after { display: none; } /* on masque le marqueur d'origine */
.faq__item summary .faq__marqueur {
flex: 0 0 auto;
margin-left: 16px;
color: var(--primaire, #5b54c9);
font-size: 24px;
font-weight: 400;
line-height: 1;
transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.faq__item summary .faq__marqueur::before { content: '+'; }
.faq__item[open] summary .faq__marqueur { transform: rotate(45deg); }
/* La reponse fond en douceur A L'OUVERTURE COMME A LA FERMETURE (opacite +
hauteur qui se deplie/replie), au lieu de surgir ou disparaitre d'un coup.
`::details-content` cible le bloc deplie du natif : on peut donc
l'animer sans JavaScript. Couple a `interpolate-size: allow-keywords`
(defini sur :root plus haut), la hauteur s'anime jusqu'a `auto`, et
`transition-behavior: allow-discrete` retarde le masquage du contenu pour
laisser le fondu de sortie se jouer entierement. Sur un vieux navigateur
qui ignore ces proprietes, le contenu s'affiche/se masque simplement,
sans regression ni saut. */
.faq__item::details-content {
opacity: 0;
height: 0;
overflow: hidden;
transition:
opacity .3s cubic-bezier(.2,.7,.2,1),
height .34s cubic-bezier(.2,.7,.2,1),
content-visibility .34s allow-discrete;
}
.faq__item[open]::details-content {
opacity: 1;
height: auto;
}
/* ============================================================
OMBRES — philosophie « une seule ombre » : réservée aux
visuels produit. On allège les ombres de survol des cartes.
============================================================ */
.pack.pack--photo { box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0; }
.pack.pack--photo:hover { box-shadow: rgba(0,0,0,.28) 3px 8px 38px 0; }
.pack:hover { box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0; }
.resa-carte:hover { box-shadow: rgba(35,33,53,.14) 0 12px 26px; }
/* ============================================================
CONTACT — reste sur fond nuit, formulaire carte blanche
(déjà sombre dans ton CSS ; on arrondit + filets fins)
============================================================ */
.contact__form { border-radius: var(--radius); }
.contact__intro .section__kicker { color: #f5a623; }
.field input, .field select, .field textarea { border-radius: 11px; border-color: #e5e2db; }
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 640px) {
/* Le menu déroulant hérite d'un fond clair dans style.css : comme la
surcouche passe les liens en blanc, on assombrit le panneau pour
qu'ils restent lisibles (même teinte que la barre de nav). */
.nav__links { background: rgba(35,33,53,.97); border-bottom: none; }
.nav__links a { border-top: 1px solid rgba(246,244,240,.12); }
.hero__title { font-size: 34px; letter-spacing: -.6px; }
.section__lead { font-size: 18px; }
.faq__item summary { font-size: 17px; }
}