/* Conciergerie K, direction B, « Carton d'invitation », le noir en touches. Une feuille pour les deux maquettes : seul le bloc :root change de A à B. */
@font-face{font-family:"DM Serif Display";src:url(polices/dm-serif-display-normal-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(polices/dm-serif-display-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(polices/instrument-sans-normal-latin.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(polices/instrument-sans-italic-latin.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap}

:root{
  color-scheme:only light;
  --fond:#FFFFFF;
  --fond-alt:#D6D2C8;
  --carte:#FFFFFF;
  --filet:#E4E2DC;
  --texte:#141415;
  --texte-doux:#55534E;
  --encre:#0E0E10;
  --anneau:#141415;
  --champ:#FFFFFF;
  --fond-fenetre:#F1F0EC;
  --bord-champ:#8A877F;
  --erreur:#A3261A;
  --voile:rgb(14 14 16 / .62);
  --or:#D4AF37;
  --blanc:#FFFFFF;
  --sur-or:#0E0E10;
  --or-vif:color-mix(in srgb,var(--or) 80%,var(--blanc));
  /* les rôles que lit le menu déroulant de la fabrique (_formulaires.css) */
  --bord:var(--filet);
  --teinte:var(--texte);
  --accent:var(--or);
  --arrondi:2px;
  --ombre-levee:none;
  --t-sous:1.35rem;
  --i-sous:1.2;
  --titre:"DM Serif Display",ui-serif,Georgia,serif;
  --corps:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --marge:clamp(1.25rem,4vw,2.5rem);
  --barre:76px;
}
/* T1199 : le mode sombre, au choix du visiteur (bouton de l'en-tête) ; le clair reste par défaut. Les rôles du :root de la maquette noire */
html[data-theme=sombre]{color-scheme:dark;--fond:#0E0E10;--fond-alt:#323239;--carte:#16161A;--filet:#3A3A42;--texte:#F4F2EC;--texte-doux:#ABA79F;--encre:#050506;--anneau:#D4AF37;--champ:#0E0E10;--fond-fenetre:#16161A;--bord-champ:#6B6862;--erreur:#F2A493;--voile:rgb(5 5 6 / .8)}
/* Une bande noire (en-tête, bandeau, pied, pass, carte des sportifs) reprend les rôles du noir, dans A comme dans B */
.sombre{--fond:#0E0E10;--carte:#16161A;--filet:#2A2A30;--texte:#F4F2EC;--texte-doux:#ABA79F;--anneau:#D4AF37;--champ:#0E0E10;--erreur:#F2A493;color:var(--texte)}

*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--barre) + 1.25rem);scrollbar-color:var(--or) var(--fond);background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--texte);font:400 1.0625rem/1.65 var(--corps);-webkit-font-smoothing:antialiased;touch-action:manipulation;caret-color:var(--or)}
body.menu-ouvert{overflow:hidden}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--or);color:var(--sur-or)}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:1px;text-underline-offset:.24em}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--anneau);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--or);color:var(--sur-or);padding:.8rem 1.1rem;font-weight:600}
.evitement:focus{top:1rem}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

h1,h2,h3{font-family:var(--titre);font-weight:400;letter-spacing:-.005em;line-height:1.06;text-wrap:balance;margin:0 0 .45em;color:var(--texte)}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400}
h1,h2{overflow-wrap:break-word}
h1{font-size:clamp(2rem,1rem + 5vw,4.4rem)}
h2{font-size:clamp(2.05rem,1.4rem + 2.4vw,3.3rem)}
h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);line-height:1.15}
p{margin:0 0 1em;max-width:66ch}
.cadre{width:min(100% - 2*var(--marge),77.5rem);margin-inline:auto}
section{padding-block:clamp(4.25rem,3rem + 5vw,7.5rem)}
.ton-fond{background:var(--fond)}
.ton-alt{background:var(--fond-alt)}
.ton-encre{background:var(--encre)}

.etiquette{display:flex;align-items:center;gap:.8rem;max-width:none;margin:0 0 1.15rem;font:600 .78125rem/1.35 var(--corps);letter-spacing:.3em;text-transform:uppercase;color:var(--texte-doux)}
.etiquette::before{content:"";flex:none;width:24px;height:1px;background:var(--or)}
.chapo{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;color:var(--texte-doux)}
.tete{max-width:48rem;margin:0 auto clamp(2.5rem,2rem + 2vw,4rem);text-align:center}
.tete .etiquette{justify-content:center}
.tete .chapo,.tete p{margin-inline:auto}
.indice{font-size:.9375rem;color:var(--texte-doux)}

/* Les boutons : l'or ne sert qu'à ce qui se clique */
.boutons{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.85rem 1.45rem;border:1px solid var(--or);border-radius:2px;background:var(--or);color:var(--sur-or);font:600 .875rem/1.2 var(--corps);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;touch-action:manipulation;text-align:center}
.bouton:hover{background:var(--or-vif);border-color:var(--or-vif)}
.bouton-contour{background:transparent;color:var(--texte)}
.bouton-contour:hover{background:color-mix(in srgb,var(--or) 14%,transparent);border-color:var(--or)}
.bouton svg,.icone{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bouton svg.plein{fill:currentColor;stroke:none}
.bouton-icone{padding:0;width:48px}
@media (prefers-reduced-motion:no-preference){
  .bouton{transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
  .bouton:active{transform:scale(.97)}
}

/* Le bandeau et l'en-tête : toujours sur le noir, dans A comme dans B (son blason est un or fait pour le noir) */
.bandeau{background:var(--encre);color:var(--texte-doux);font:500 .78125rem/1.4 var(--corps);letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:.6rem var(--marge)}
.bandeau p{margin:0 auto;max-width:none}
.entete{position:sticky;top:0;z-index:50;background:var(--fond);border-bottom:1px solid var(--filet)}
.entete-dedans{display:flex;align-items:center;gap:1.25rem;min-height:var(--barre)}
.marque{display:flex;align-items:center;gap:.7rem;flex:none;text-decoration:none;color:var(--texte)}
.marque img{height:56px;width:auto}
.marque-nom{font:400 1.3rem/1 var(--titre);letter-spacing:.01em;white-space:nowrap}
.menu{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.menu a{position:relative;padding:.7rem 0;font:500 .90625rem/1.2 var(--corps);color:var(--texte);text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left}
.menu a:hover::after,.menu a[aria-current=page]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){.menu a::after{transition:transform .25s ease}}
.menu .seul-menu{display:none}
.entete-actions{display:flex;gap:.5rem;flex:none}
.entete-actions .bouton{padding-inline:1.1rem;letter-spacing:.05em}
.entete-actions .bouton-icone{padding:0}
.bascule-theme{display:inline-flex;flex:none;margin-left:-.75rem;width:44px;height:44px;padding:0;border:1px solid var(--filet);border-radius:2px;background:transparent;color:var(--or);cursor:pointer;align-items:center;justify-content:center;touch-action:manipulation}
.bascule-theme:hover{border-color:var(--or)}
.bascule-theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.bascule-theme .lune,html[data-theme=sombre] .bascule-theme .soleil{display:none}
html[data-theme=sombre] .bascule-theme .lune{display:block}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--filet);border-radius:2px;background:transparent;cursor:pointer;align-items:center;justify-content:center;touch-action:manipulation}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:1.5px;background:var(--texte);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
/* T1199 : 1340 et non plus 1180 ; l'en-tête complet (menu, deux boutons, bascule) débordait jusque-là */
@media (max-width:1340px){
  .burger{display:inline-flex}
  .entete-actions{margin-left:auto}
  .burger{margin-left:0}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.5rem var(--marge) 2rem;background:var(--fond);border-top:1px solid var(--filet);overflow-y:auto;overscroll-behavior:contain}
  .menu.ouvert{display:flex}
  .menu a{padding:1rem 0;font-size:1.125rem;border-bottom:1px solid var(--filet)}
  .menu a::after{display:none}
  .menu a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.3em}
  .menu .seul-menu{display:flex;margin-top:1.25rem;border:1px solid var(--or)}
  .menu a.bouton{text-decoration:none;color:var(--sur-or)}
  .menu a.bouton-contour{color:var(--texte)}
}
@media (max-width:767px){
  :root{--barre:64px}
  .marque img{height:44px}
  .marque-nom{font-size:1.2rem}
  .entete-actions{display:none}
  .bascule-theme{margin-left:auto}
  .burger{margin-left:0}
  .bandeau{letter-spacing:.14em;font-size:.75rem}
}

/* L'accueil : le carton (la signature, le cadre d'or de sa plaquette) et la photo à côté */
.heros{padding-block:clamp(2.5rem,1.6rem + 3.5vw,5rem) clamp(3.5rem,2.5rem + 4vw,6rem)}
.heros-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.carton{grid-column:1 / 9;grid-row:1;position:relative;z-index:2;background:var(--carte);border:1px solid var(--or);padding:clamp(2rem,1.2rem + 3vw,3.6rem)}
.carton h1{font-size:clamp(2.3rem,1.2rem + 3vw,3.45rem)}
.carton .chapo{margin-bottom:1.75rem}
.heros-ligne{margin:1.75rem 0 0;padding-top:1.1rem;border-top:1px solid var(--filet);font:600 .78125rem/1.6 var(--corps);letter-spacing:.24em;text-transform:uppercase;color:var(--texte-doux)}
.heros-photo{grid-column:8 / 13;grid-row:1;margin:0;height:clamp(28rem,42vw,38rem)}
.heros-photo img{width:100%;height:100%;object-fit:cover;object-position:24% 55%}
.cadre-or{outline:1px solid var(--or);outline-offset:-14px}
.reperes{list-style:none;margin:clamp(3rem,2rem + 3vw,4.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);text-align:center}
.reperes li{padding-top:1.3rem;border-top:1px solid var(--or)}
.reperes strong{display:block;margin-bottom:.35rem;font:400 1.4rem/1.2 var(--titre)}
.reperes span{display:block;color:var(--texte-doux);font-size:1rem;max-width:26ch;margin-inline:auto}
@media (max-width:900px){
  .heros-grille{display:flex;flex-direction:column}
  .heros-photo{order:-1;width:100%;height:auto;aspect-ratio:16 / 9}
  .carton{margin:-3rem .75rem 0}
}
@media (max-width:767px){
  .heros{padding-top:1rem}
  .heros-photo{aspect-ratio:5 / 4}
  .heros-photo img{object-position:36% 60%}
  .carton{margin:-2.5rem .5rem 0;padding:1.75rem 1.4rem 1.6rem}
  .carton h1{line-height:1.1}
  .reperes{grid-template-columns:1fr;gap:1.4rem}
}

/* Effet ② : la journée heure par heure, la photo suit l'étape qu'on lit */
.journee-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.journee-liste{list-style:none;margin:0;padding:0}
.journee-liste li{position:relative;padding:1.6rem 0 2rem}
.journee-liste li::before,.journee-liste li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filet)}
.journee-liste li::after{background:var(--or);transform:scaleX(0);transform-origin:left}
.journee-liste li.actif::after{transform:scaleX(1)}
.heure{margin:0 0 .55rem;font:400 clamp(1.8rem,1.25rem + 1.7vw,2.75rem)/1 var(--titre);font-variant-numeric:tabular-nums;color:var(--texte)}
.journee-liste h3{font-size:clamp(1.4rem,1.2rem + .75vw,1.85rem)}
.suit-actif .journee-liste li:not(.actif) .heure,.suit-actif .journee-liste li:not(.actif) h3 a{color:var(--texte-doux)}
.journee-liste h3{margin-bottom:.4rem}
.journee-liste h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration-thickness:1px}
.journee-liste p:last-child{margin:0;color:var(--texte-doux)}
.etape-photo{margin:0 0 1.2rem;width:100%;aspect-ratio:4 / 3;object-fit:cover}
.journee-photo{display:none;margin:0}
.suit-actif .journee-photo{display:block;position:sticky;top:calc(var(--barre) + 2rem);height:calc(100vh - var(--barre) - 4rem);max-height:44rem;min-height:24rem}
.suit-actif .journee-photo img{width:100%;height:100%;object-fit:cover}
.suit-actif .etape-photo{display:none}
.suit-actif .journee-liste li{min-height:42vh;display:flex;flex-direction:column;justify-content:center}
@media (prefers-reduced-motion:no-preference){
  .journee-photo img{transition:opacity .45s ease}
  .journee-liste li::after{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .heure,.journee-liste h3 a{transition:color .4s ease}
}

/* Effet ① : les formules en pass VIP, au format de sa carte de membre, qui se retournent */
.pass-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.pass-item{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.pass{display:block;position:relative;width:100%;aspect-ratio:1.586;perspective:1600px;color:var(--texte);text-decoration:none;border-radius:10px}
.pass-carte{position:absolute;inset:0;transform-style:preserve-3d}
.pass-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.1rem,.7rem + 1.5vw,2rem);border:1px solid var(--or);border-radius:10px;background:radial-gradient(130% 150% at 100% 0%,var(--filet) 0%,var(--carte) 42%,var(--fond) 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.pass-face::after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--or) 55%,transparent);border-radius:2px;pointer-events:none}
.pass-verso{transform:rotateY(180deg)}
.pass-haut{display:flex;align-items:center;gap:.65rem}
.pass-haut img{height:36px;width:auto}
.pass-marque{font:400 1.05rem/1 var(--titre);letter-spacing:.02em;white-space:nowrap}
.pass-type{margin-left:auto;font:600 .75rem/1 var(--corps);letter-spacing:.3em;text-transform:uppercase;color:var(--texte-doux)}
.pass-nom{font:400 clamp(1.7rem,1.1rem + 2.3vw,2.85rem)/1.04 var(--titre);letter-spacing:-.005em}
.pass-bas{font:600 .75rem/1.4 var(--corps);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux)}
.pass-verso .pass-type{margin:0}
.pass-compris{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.15rem;font-size:clamp(.9375rem,.85rem + .3vw,1.0625rem);line-height:1.4}
.pass-compris li{padding-left:1.1rem;position:relative}
.pass-compris li::before{content:"";position:absolute;left:0;top:.68em;width:.55rem;height:1px;background:var(--or)}
.pass-action{font:600 .8125rem/1.2 var(--corps);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.3em}
@media (hover:hover){.pass:hover .pass-carte{transform:rotateY(180deg)}}
.pass:focus-visible .pass-carte,.pass-item.retourne .pass-carte{transform:rotateY(180deg)}
.pass:focus-visible{outline-offset:6px}
.pass-retourner{display:none;min-height:44px;padding:.5rem 1rem;border:0;background:none;color:var(--texte);font:500 .9375rem/1.2 var(--corps);text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.3em;cursor:pointer;touch-action:manipulation}
.js-ok .pass-retourner{display:inline-block}
@media (prefers-reduced-motion:no-preference){.pass-carte{transition:transform .7s cubic-bezier(.3,.7,.2,1)}}
/* Immobile : le recto et le verso l'un sous l'autre, rien ne tourne */
@media (prefers-reduced-motion:reduce){
  .pass{aspect-ratio:auto;perspective:none}
  .pass-carte{position:relative;transform:none !important;display:block;border:1px solid var(--or);border-radius:10px;background:radial-gradient(130% 150% at 100% 0%,var(--filet) 0%,var(--carte) 42%,var(--fond) 100%);overflow:hidden}
  .pass-carte::after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--or) 55%,transparent);border-radius:2px;pointer-events:none}
  .pass-face{position:relative;inset:auto;border:0;border-radius:0;background:none;backface-visibility:visible;-webkit-backface-visibility:visible}
  .pass-face::after{display:none}
  .pass-recto{gap:1.4rem;padding-bottom:.75rem}
  .pass-verso{transform:none;padding-top:0;gap:.35rem}
  .pass-verso .pass-action{margin-top:.75rem}
  .js-ok .pass-retourner{display:none}
}
@media (max-width:767px){.pass-liste{grid-template-columns:1fr}}

/* Les univers : une grande carte cliquable par page */
.univers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.univers a{display:flex;flex-direction:column;height:100%;color:var(--texte);text-decoration:none;text-align:center}
.univers-image{overflow:hidden;aspect-ratio:3 / 4}
.univers-image img{width:100%;height:100%;object-fit:cover}
.univers-nom{display:block;margin:1.15rem 0 .4rem;font:400 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.15 var(--titre);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em}
.univers a:hover .univers-nom{text-decoration-color:var(--or)}
.univers-ligne{display:block;color:var(--texte-doux);font-size:.975rem;line-height:1.5;max-width:30ch;margin-inline:auto}
@media (prefers-reduced-motion:no-preference){.univers-image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.univers a:hover .univers-image img{transform:scale(1.04)}}
@media (max-width:1023px){.univers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}.univers-image{aspect-ratio:1}}
@media (max-width:767px){.univers{gap:1.75rem .9rem}.univers-ligne{font-size:.9375rem}}

/* Sa phrase, en grand */
.devise{text-align:center}
.devise p.devise-texte{margin:0 auto;max-width:24ch;font:400 clamp(1.9rem,1.2rem + 2.7vw,3.4rem)/1.12 var(--titre);letter-spacing:-.005em;text-wrap:balance}
.devise-texte em{font-style:italic;font-weight:400}
.devise .etiquette{justify-content:center}

/* La fin de chaque page : la page suivante, puis le contact */
.suite{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;background:var(--carte);border:1px solid var(--filet);color:var(--texte);text-decoration:none;margin-bottom:clamp(4rem,3rem + 4vw,6.5rem)}
.suite-texte{display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:clamp(1.75rem,1.2rem + 3vw,3.5rem)}
.suite-texte .etiquette{margin:0}
.suite-titre{font:400 clamp(1.75rem,1.25rem + 2vw,2.85rem)/1.08 var(--titre);letter-spacing:-.005em;overflow-wrap:break-word}
.suite-ligne{color:var(--texte-doux)}
.suite-voir{margin-top:.5rem;font:600 .875rem/1.2 var(--corps);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.3em}
.suite-image{overflow:hidden;min-height:16rem}
.suite-image img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.suite-image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.suite:hover .suite-image img{transform:scale(1.03)}}
.contact{text-align:center}
.contact .etiquette{justify-content:center}
.contact .chapo{margin:0 auto 1.75rem}
.contact .boutons{justify-content:center}
.contact-mail{margin:1.5rem auto 0;color:var(--texte-doux)}
@media (max-width:767px){
  .suite{grid-template-columns:1fr}
  .suite-image{order:-1;min-height:0;aspect-ratio:16 / 9}
  .contact .boutons{flex-direction:column;align-items:stretch}
}

/* Les pages intérieures */
.page-tete{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.page-tete-grille{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:end}
.page-tete h1{margin-bottom:.4em}
.page-tete .chapo{margin-bottom:1.75rem}
.page-tete .heros-ligne{margin-top:0;border:0;padding:0}
.sommaire{margin:0}
.sommaire ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--or)}
.sommaire li{border-bottom:1px solid var(--filet)}
.sommaire a{display:flex;align-items:center;min-height:48px;padding:.85rem 0;font-weight:500;text-decoration:none}
.sommaire a:hover{text-decoration:underline;text-decoration-color:var(--or)}
.sommaire .etiquette{margin-bottom:.9rem}
@media (max-width:900px){.page-tete-grille{grid-template-columns:1fr;align-items:start}}

.service{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5.5rem);align-items:center}
.service + .service{margin-top:clamp(4rem,3rem + 4vw,6.5rem)}
.service.inverse .service-photo{order:2}
.service-photo{margin:0}
.service-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.service-photo.paysage img{aspect-ratio:5 / 4}
.service-photo.deux{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.service-photo.deux img{aspect-ratio:3 / 4}
.precision{padding-left:1.1rem;border-left:1px solid var(--or);color:var(--texte-doux)}
.service .bouton{margin-top:.75rem}
@media (max-width:900px){
  .service{grid-template-columns:1fr;gap:1.75rem}
  .service.inverse .service-photo{order:0}
  .service-photo img{aspect-ratio:4 / 3}
}

.villes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.villes figure{margin:0}
.villes img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.villes figcaption{margin-top:.9rem;text-align:center;font:400 1.4rem/1.2 var(--titre)}
.destinations-ligne{display:block;margin-top:1.5rem;font:600 .8125rem/1.7 var(--corps);letter-spacing:.24em;text-transform:uppercase;color:var(--texte-doux)}
@media (max-width:767px){.villes img{aspect-ratio:3 / 4}}

.grille-mots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);text-align:center}
.grille-mots.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille-mots li{padding-top:1.3rem;border-top:1px solid var(--or)}
.grille-mots strong{display:block;margin-bottom:.4rem;font:400 clamp(1.3rem,1.1rem + .55vw,1.55rem)/1.2 var(--titre)}
.grille-mots span{display:block;color:var(--texte-doux);max-width:28ch;margin-inline:auto}
@media (max-width:1023px){.grille-mots,.grille-mots.trois{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grille-mots,.grille-mots.trois{grid-template-columns:1fr}}

.deux-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5.5rem)}
@media (max-width:900px){.deux-colonnes{grid-template-columns:1fr}}

/* Effet ④ : le carnet des envies */
.envies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.envie{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;height:100%;min-height:9rem;padding:1.4rem 1.1rem 1.3rem;background:var(--carte);color:var(--texte);border:1px solid var(--filet);border-radius:2px;text-align:center;cursor:pointer;touch-action:manipulation}
.envie:hover{border-color:var(--or)}
.envie-coche{display:grid;place-items:center;width:1.9rem;height:1.9rem;margin-bottom:.35rem;border:1px solid var(--or);border-radius:50%;color:transparent}
.envie-coche svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.envie-nom{font:400 1.2rem/1.2 var(--titre)}
.envie-desc{font-size:.9375rem;line-height:1.45;color:var(--texte-doux)}
.envie[aria-pressed=true]{border-color:var(--or);background:color-mix(in srgb,var(--or) 11%,var(--carte))}
.envie[aria-pressed=true] .envie-coche{background:var(--or);color:var(--sur-or)}
@media (prefers-reduced-motion:no-preference){.envie{transition:border-color .15s ease,background-color .15s ease}}
.programme{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;margin-top:1.75rem;padding:1.4rem clamp(1.25rem,3vw,2rem);border:1px solid var(--or);background:var(--carte)}
.programme p{margin:0;font-size:1.0625rem}
.programme strong{font-weight:600}
@media (max-width:767px){.envies{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.envie{min-height:0;padding:1.1rem .75rem}.envie-desc{font-size:.875rem}.programme .bouton{width:100%}}

.carte-noire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.25rem,4vw,4rem);align-items:center;margin-top:clamp(3rem,2.5rem + 3vw,5.5rem);padding:clamp(1.75rem,1.2rem + 3vw,3.5rem);background:var(--fond);border:1px solid var(--or)}
.carte-noire h2{margin:0}
.carte-noire p{color:var(--texte-doux)}
@media (max-width:900px){.carte-noire{grid-template-columns:1fr}}

.pass-seul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.pass-seul .pass-item{max-width:34rem;width:100%}
.un-pass{grid-template-columns:1fr}
.deux-mots{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}
@media (max-width:520px){.deux-mots{grid-template-columns:1fr}}
@media (max-width:900px){.pass-seul{grid-template-columns:1fr}}

.texte-long{max-width:46rem}
.texte-long h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-top:2.2rem}
.texte-long h2:first-child{margin-top:0}

/* Le pied de page : sur le noir */
.pied{background:var(--encre);padding-block:clamp(3.5rem,2.5rem + 3vw,5rem) 1.5rem}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.pied-marque img{width:150px;height:auto;margin-bottom:1rem}
.pied-marque p{color:var(--texte-doux);font-size:.9375rem;letter-spacing:.06em}
.pied h2{margin:0 0 1rem;font:600 .78125rem/1.3 var(--corps);font-stretch:100%;letter-spacing:.3em;text-transform:uppercase;color:var(--texte-doux)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pied li{font-size:.9375rem}
.pied li a{display:inline-flex;align-items:center;min-height:40px;text-decoration-color:color-mix(in srgb,var(--or) 70%,transparent)}
.pied-ligne{display:inline-flex;align-items:center;min-height:40px;color:var(--texte-doux)}
.pied-tel{display:grid;padding:.45rem 0;line-height:1.45}
.pied-tel span:first-child{color:var(--texte-doux)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding-top:1.4rem;border-top:1px solid var(--filet);color:var(--texte-doux);font-size:.8125rem}
@media (max-width:1023px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pied-grille{grid-template-columns:1fr}}

/* Au téléphone : Appeler et WhatsApp fixés en bas, qui flottent, sans bande derrière */
.barre-appel{display:none}
@media (max-width:767px){
  .barre-appel{position:fixed;z-index:40;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:.6rem;background:none}
  .barre-appel .bouton-nuit{background:var(--fond);color:var(--texte);border-color:var(--or)}
  body{padding-bottom:5.25rem}
}

/* La fenêtre « Préparer mon expérience » (un <dialog> ; sans JavaScript, son ancre l'affiche dans la page) */
dialog.fenetre{width:min(46rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid var(--or);border-radius:2px;background:var(--carte);color:var(--texte)}
/* le menu déroulant de la fabrique, aux couleurs de la fenêtre (ses rôles restent ceux du :root) */
dialog.fenetre .choix-bouton{color:var(--texte);background:var(--champ);border-color:var(--bord-champ)}
dialog.fenetre .choix-liste{background:var(--champ)}
dialog.fenetre .choix-liste li{color:var(--texte)}
dialog.fenetre[open]{display:flex;flex-direction:column}
dialog.fenetre:target:not([open]){display:block;position:static;margin:2rem auto}
dialog.fenetre::backdrop{background:var(--voile)}
html:has(dialog.fenetre[open]){overflow:hidden}
.fenetre-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.4rem 1.5rem 1.1rem;border-bottom:1px solid var(--filet);background:var(--fond-fenetre)}
.fenetre-tete h2{margin:0;font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem)}
.fenetre-tete p{margin:.35rem 0 0;color:var(--texte-doux);font-size:.9375rem}
.fermer{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-.35rem -.5rem 0 0;border:0;border-radius:2px;background:transparent;cursor:pointer}
.fermer:hover{background:color-mix(in srgb,var(--or) 14%,transparent)}
.fenetre-corps{padding:1.3rem 1.5rem 1.6rem;overflow-y:auto;overscroll-behavior:contain;background:var(--fond-fenetre)}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.05rem}
.field label{font-weight:600;font-size:.9375rem}
.field .facultatif{font-weight:400;color:var(--texte-doux)}
.field input,.field textarea{width:100%;min-height:3.1rem;padding:.75rem .9rem;font:inherit;font-size:1rem;color:var(--texte);background:var(--champ);border:1.5px solid var(--bord-champ);border-radius:2px}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--anneau);outline-offset:1px}
.field [aria-invalid=true]{border-color:var(--erreur)}
.aide{margin:0;font-size:.8125rem;line-height:1.45;color:var(--texte-doux)}
.erreur{margin:0;font-size:.875rem;line-height:1.45;color:var(--erreur);font-weight:500}
.accord{display:flex;gap:.75rem;align-items:flex-start;margin:.5rem 0 .4rem;font-size:.9375rem;line-height:1.5}
.accord input{flex:none;width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--or)}
.envoyer{margin-top:1rem;width:100%}
.retour{padding:1.25rem 0 .25rem}
.retour-titre{font:400 1.5rem/1.2 var(--titre);margin-bottom:.6rem}
form.envoye > :not([data-retour]){display:none}
@media (max-width:640px){
  dialog.fenetre{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0}
  .deux-champs{grid-template-columns:1fr}
}

/* Le téléphone : la même page, plus serrée (l'accueil tient en huit écrans au plus) */
@media (max-width:767px){
  section{padding-block:2.4rem}
  .pass-liste{gap:1.1rem}
  .pass-item{gap:.2rem}
  .univers-ligne{font-size:.875rem}
  .heros{padding-block:1rem 3rem}
  .bandeau-long{display:none}
  .etiquette{letter-spacing:.2em}
  .carton{margin:-2rem 0 0;padding:1.6rem 1.1rem 1.4rem}
  .carton h1{font-size:min(9.2vw,2.35rem)}
  .carton .chapo{margin-bottom:1.25rem}
  .heros-photo{aspect-ratio:2 / 1}
  .heros-photo img{object-position:36% 32%}
  .heros-ligne{margin-top:1.25rem}
  .reperes{margin-top:2rem;gap:1rem}
  .reperes li{padding-top:.9rem}
  .reperes strong{font-size:1.25rem}
  .tete{margin-bottom:1.5rem}
  .univers-image{aspect-ratio:5 / 4}
  .univers-nom{margin-top:.8rem}
  .devise p.devise-texte{font-size:1.8rem}
  .suite{grid-template-columns:6.5rem minmax(0,1fr);margin-bottom:2.25rem}
  .suite-image{order:-1;aspect-ratio:auto;min-height:100%}
  .suite-texte{padding:1.1rem 1.1rem 1.2rem;gap:.35rem}
  .suite-titre{font-size:1.45rem}
  .suite-ligne{font-size:.9375rem;line-height:1.45}
  .contact .boutons{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .contact .boutons > :first-child{grid-column:1 / -1}
  .contact .boutons .bouton{padding-inline:.6rem}
  .pied-grille{grid-template-columns:1fr 1fr;gap:2rem 1.25rem}
  .pied-marque,.pied-joindre{grid-column:1 / -1}
  .pied{padding-top:2.5rem}
  .pied-marque{display:flex;align-items:center;gap:1rem}
  .pied-marque img{width:88px;margin:0}
  .pied-marque p{margin:0}
  .pied-joindre{order:3}
  .pied-bas{flex-direction:column;gap:.4rem;margin-top:1.75rem}
  h1,h2,h3,.suite-titre,.devise p.devise-texte{line-height:1.1}
  .carton h1{line-height:1.1}
  .pied h2{margin-bottom:.5rem}
  .pied-grille{gap:1.5rem 1.25rem}
  .reperes{margin-top:1.5rem}
  .contact-mail{margin-top:1rem}
}
@media (max-width:360px){.suite{grid-template-columns:1fr}.suite-image{display:none}}

/* La journée sans l'effet (au téléphone et à la tablette, 900 px et moins ; en mouvement réduit ; sans script) : une frise
   de cinq étapes, chacune avec sa photo, et au téléphone une liste où chaque étape garde la sienne, à gauche */
.journee:not(.suit-actif) .journee-grille{display:block}
.journee:not(.suit-actif) .journee-liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);text-align:center}
.journee:not(.suit-actif) .journee-liste li{display:flex;flex-direction:column;align-items:center;padding:0}
.journee:not(.suit-actif) .journee-liste li::before,.journee:not(.suit-actif) .journee-liste li::after{display:none}
.journee:not(.suit-actif) .etape-photo{order:-1;aspect-ratio:4 / 5;margin:0 0 1.1rem}
.journee:not(.suit-actif) .heure{font-size:clamp(1.6rem,1.15rem + 1.05vw,2.2rem);padding-top:1rem;border-top:1px solid var(--or);width:100%}
.journee:not(.suit-actif) .journee-liste h3{font-size:clamp(1.2rem,1.1rem + .45vw,1.45rem)}
.journee:not(.suit-actif) .journee-liste p:last-child{font-size:.9375rem}
@media (max-width:1100px){
  .journee:not(.suit-actif) .journee-liste{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:2.5rem}
  .journee:not(.suit-actif) .journee-liste li{grid-column:span 2}
  .journee:not(.suit-actif) .journee-liste li:nth-child(4){grid-column:2 / span 2}
  .journee:not(.suit-actif) .journee-liste li:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:600px){
  .journee:not(.suit-actif) .journee-liste{grid-template-columns:1fr;gap:0;text-align:left}
  .journee:not(.suit-actif) .journee-liste li,.journee:not(.suit-actif) .journee-liste li:nth-child(n){grid-column:auto;display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:1rem;align-items:start;padding:1rem 0;border-top:1px solid var(--filet)}
  .journee:not(.suit-actif) .etape-photo{grid-column:1;grid-row:1 / span 3;aspect-ratio:1;margin:0}
  .journee:not(.suit-actif) .heure,.journee:not(.suit-actif) .journee-liste h3,.journee:not(.suit-actif) .journee-liste p:last-child{grid-column:2}
  .journee:not(.suit-actif) .heure{border:0;padding:0;margin-bottom:.2rem;font-size:1.55rem}
  .journee:not(.suit-actif) .journee-liste h3{margin-bottom:.15rem}
}

/* Le partenaire voyages, Warfira (correction du client du 21/10, reprise de la maquette noire le 02/11) */
.partenaire{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin:clamp(2.5rem,2rem + 2vw,4rem) auto 0;max-width:40rem;padding-top:1.5rem;border-top:1px solid var(--filet);text-align:left}
.partenaire img{flex:none;width:88px;height:auto;padding:8px;background:var(--blanc);border-radius:2px}
.partenaire p{margin:0;color:var(--texte-doux)}
.partenaire strong{color:var(--texte);font-weight:600}