/* TAMATOA PAHIO, TAXI TAMS (TAHITI) (le Don, 10/10/2026 : « inspire-toi plus d'Uber » ; T684 : ses couleurs, puis son logo).
   La mise en page d'une appli de transport (des champs avec leur icône, des boutons francs, des cartes) dans SES
   couleurs : les bleus de son logo (du bleu ciel au bleu roi) et le turquoise qu'il a cité, sans aucune surface noire.
   11/10 02h, le Don : « je trouve les couleurs un peu fades » : les bleus repris plus francs, au plus près du logo
   (bleu électrique, bleu vif, cyan), boutons pleins en bleu électrique avec le texte en blanc.
   Contrastes mesurés : --encre 15,5:1 sur blanc, 5,7:1 au pire sur le dégradé, 7,3:1 sur --turquoise ; blanc 5,55:1
   sur --bleu ; --roi 6,5:1 sur --ciel-pale ; --encre-douce n'est posée que sur blanc, --ciel-pale, --ciel-clair ou
   --turquoise-pale (5,9:1 au pire). */

@font-face{font-family:"Manrope";src:url("polices/manrope-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("polices/lexend-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:only light;
  --encre:#012244;           /* le texte : le bleu marine de son badge (le taxi, le ruban), jamais un noir */
  --encre-douce:#3A5670;     /* le texte secondaire, sur les fonds clairs seulement */
  --gris:#F1F6FA;            /* les champs */
  --gris-fonce:#DCE6EE;      /* les bords */
  --fond:#FFFFFF;
  /* LES BLEUS DU LOGO « TAMS » (relevés sur le fichier, 10/10 23h43), du plus clair au plus profond */
  --ciel-pale:#E3F3FF;
  --ciel-clair:#C4E6FF;
  --ciel:#86D0FA;
  --bleu:#0A66CC;            /* les boutons pleins, texte en blanc (5,55:1) */
  --roi:#0050B8;             /* les liens, le numéro, le survol des boutons : le bleu profond du logo, 7,6:1 sur blanc */
  /* ET SON TURQUOISE, gardé à côté (le Don, 23h45 : « garde un peu de turquoise, que ce ne soit pas monochrome ») */
  --turquoise:#18C0B9;       /* la vague de son badge : les icônes, les étapes, les coches */
  --turquoise-pale:#CFF3F0;  /* une section sur deux */
  --accent-titre:#08788F;    /* le mot accentué d'un titre : un turquoise profond de sa vague, ni le bleu des boutons ni celui des liens (le Don, 19/10/2026 : une couleur, un sens) ; 3,9:1 sur --ciel-clair */
  --wa:#0E7468;              /* le vert de WhatsApp, assombri : 5:1 sur --ciel-pale, le blanc s'y lit à 5,6:1 */
  --or:#C09637;              /* l'anneau d'or du badge : en touches seulement (pastille 24 h/24, étoiles, trait sous les titres), jamais pour du texte (2,7:1) */
  --degrade:linear-gradient(120deg,#49AAF5 0%,#33B6DA 55%,#18C0B9 100%);   /* du bleu ciel des lettres « TAXI TAMS » au turquoise de la vague ; l'encre s'y lit à 6,4:1 au pire */
  --arrondi:12px;
  --titre:"Lexend",system-ui,sans-serif;
  --texte:"Manrope",system-ui,sans-serif;
  --largeur:76rem;
  --marge-section:clamp(3.5rem,8vw,6rem) 1.25rem;
  --teinte:var(--encre);--sur-teinte:var(--fond);--accent:var(--roi);
  --carte:#FFFFFF;--bord:rgba(10,37,64,.14);--t-sous:1.1rem;--i-sous:1.35;--ombre-levee:0 24px 60px -24px rgba(10,37,64,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--texte);font-size:clamp(1rem,1.4vw,1.05rem);line-height:1.55;margin:0;background:var(--fond);color:var(--encre);caret-color:var(--encre)}
::selection{background:var(--ciel);color:var(--encre)}
img{max-width:100%;height:auto;display:block}
a{color:var(--encre);text-underline-offset:.2em;text-decoration-color:var(--turquoise);text-decoration-thickness:2px}
a,button,summary,label{touch-action:manipulation}
:focus-visible{outline:3px solid var(--encre);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.08;letter-spacing:-.025em;margin:0;color:var(--encre);text-wrap:balance}
/* le mot accentué d'un titre : en bleu franc, sans surlignage (le Don, 11/10 02h11 : « surligné en bleu, bizarre, j'aime pas ») */
h1 em,h2 em{font-style:normal;color:var(--accent-titre)}
p{text-wrap:pretty}
.invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:0;padding:.6rem 1rem;background:var(--bleu);color:var(--fond);z-index:100}
.saut:focus{left:1rem}

/* ── LES BOUTONS ── */
.bouton{font:600 1rem var(--texte);min-height:3rem;padding:.75rem 1.4rem;border-radius:var(--arrondi);border:0;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.bouton:active{transform:scale(.98)}
.bouton--plein{background:var(--bleu);color:var(--fond)}
.bouton--plein:hover{background:var(--roi)}
.bouton--contour{background:var(--fond);color:var(--roi);box-shadow:inset 0 0 0 2px var(--bleu)}
.bouton--contour:hover{background:var(--ciel-pale)}
.bouton--wa svg,.bouton[data-wa-modele] svg{color:var(--wa)}
.bouton--blanc{background:var(--fond);color:var(--encre)}
.bouton--blanc:hover{background:var(--ciel-pale)}
.pastille{font:600 .88rem var(--texte);display:inline-flex;align-items:center;min-height:2.4rem;padding:.4rem 1rem;border-radius:999px;background:var(--bleu);color:var(--fond);text-decoration:none}
.lien-souligne{font-weight:600;color:var(--encre);text-underline-offset:.25em}

/* ── L'EN-TÊTE NOIR ── */
.entete{position:sticky;top:0;z-index:40;background:var(--fond);color:var(--encre);box-shadow:0 1px 0 var(--gris-fonce),0 8px 24px -16px rgba(10,37,64,.25)}
.entete__wrap{max-width:var(--largeur);margin:0 auto;padding:.55rem 1.25rem;display:flex;align-items:center;gap:1.4rem;min-height:4rem}
.marque{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--encre);flex:none}
.marque img{height:2.9rem;width:auto;display:block}
.marque__nom{font:600 1.2rem var(--titre);letter-spacing:-.02em;white-space:nowrap;color:var(--roi)}
.marque__icone{width:2.1rem;height:2.1rem;border-radius:9px;background:var(--fond);color:var(--encre);display:grid;place-items:center;flex:none}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{color:var(--encre);text-decoration:none;font-weight:600;font-size:.92rem;padding:.55rem .75rem;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--ciel-pale)}
.nav a[aria-current="page"]{background:var(--ciel-clair)}
.entete__droite{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.entete__h24{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;padding:.3rem .8rem;border-radius:999px;background:var(--ciel-clair);box-shadow:inset 0 0 0 1.5px var(--or);color:var(--encre);font:700 .86rem var(--texte);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.entete__h24 svg{color:var(--bleu)}
.entete__h24:hover{background:var(--ciel)}
.entete__rond{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ciel-pale);color:var(--roi);flex:none}
.entete__rond:hover{background:var(--ciel-clair)}
.entete__rond--wa{color:var(--wa)}
.entete__resa{min-height:2.6rem;padding:.5rem 1rem;font-size:.92rem;border-radius:999px;white-space:nowrap}
.langue{position:relative}
.langue__bouton{font:600 .9rem var(--texte);display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.4rem .8rem;border-radius:999px;border:0;background:transparent;color:var(--encre);cursor:pointer}
.langue__bouton:hover{background:var(--ciel-pale)}
.langue__liste{position:absolute;right:0;top:calc(100% + .5rem);min-width:11rem;list-style:none;margin:0;padding:.4rem;border-radius:var(--arrondi);background:var(--fond);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.langue__liste[hidden]{display:none}
.langue__liste a{display:block;padding:.7rem .9rem;border-radius:8px;color:var(--encre);text-decoration:none;font-weight:600}
.langue__liste a:hover,.langue__liste a[aria-current]{background:var(--ciel-pale)}
.langue__liste a[aria-current]::after{content:" ✓";color:var(--encre)}
.burger{display:none;width:2.75rem;height:2.75rem;border-radius:999px;border:0;background:transparent;cursor:pointer;position:relative}
.burger:hover{background:var(--ciel-pale)}
.burger span{position:absolute;left:.82rem;width:1.1rem;height:2px;background:var(--encre);transition:transform .2s ease,opacity .2s ease}
.burger span:nth-child(1){top:.95rem}.burger span:nth-child(2){top:1.3rem}.burger span:nth-child(3){top:1.65rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.35rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.35rem) rotate(-45deg)}

/* ── LE PREMIER ÉCRAN : la réservation à gauche, le chauffeur et le téléphone à droite ── */
.heros{padding:clamp(2.5rem,6vw,4.5rem) 1.25rem clamp(3rem,7vw,5rem);background:linear-gradient(180deg,var(--ciel-clair) 0%,var(--ciel-pale) 100%)}
.heros .champ-icone,.heros .compteur,.heros .quand button:not([aria-checked="true"]){background:var(--fond)}
.heros .compteur__boutons button{background:var(--ciel-pale)}
.heros__wrap{max-width:var(--largeur);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.heros__lieu{display:flex;align-items:center;gap:.4rem;margin:0 0 1rem;font-weight:600;font-size:.95rem}
.heros__lieu svg{color:var(--turquoise)}
.heros h1{font-size:clamp(2.5rem,5.4vw,4.2rem);max-width:12ch;margin:0 0 1.8rem}
.resa{display:grid;gap:.6rem;max-width:30rem}
.quand{display:inline-flex;gap:.4rem;margin:0 0 .3rem}
.quand button{font:600 .92rem var(--texte);display:inline-flex;align-items:center;gap:.45rem;min-height:2.6rem;padding:.4rem 1rem;border-radius:999px;border:0;background:var(--gris);color:var(--encre);cursor:pointer}
.quand button[aria-checked="true"]{background:var(--bleu);color:var(--fond)}
.champ-icone{position:relative;display:flex;align-items:center;gap:.8rem;background:var(--gris);border-radius:var(--arrondi);padding:0 1rem;min-height:3.4rem;border:2px solid transparent}
.champ-icone:focus-within{border-color:var(--bleu);background:var(--fond)}
.champ-icone input{font:500 1.02rem var(--texte);color:var(--encre);border:0;background:transparent;width:100%;min-height:3rem;padding:0}
.champ-icone input::placeholder{color:#6b6b6b}
.champ-icone input:focus{outline:none}
.champ-icone svg{flex:none;color:var(--encre)}
.champ-icone__point{width:.7rem;height:.7rem;border-radius:50%;background:var(--turquoise);box-shadow:0 0 0 2px var(--encre);flex:none}
.champ-icone__carre{width:.65rem;height:.65rem;background:var(--encre);flex:none}
.raccourci{font:600 .88rem var(--texte);justify-self:start;display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.35rem .95rem;border-radius:999px;border:1.5px solid var(--bleu);background:var(--ciel-pale);color:var(--encre);cursor:pointer}
.raccourci:hover{background:var(--ciel)}
.raccourcis{display:flex;flex-wrap:wrap;gap:.5rem;justify-self:start}
.raccourci--position{background:var(--fond)}
.localiser__aide{font-size:.86rem;line-height:1.4;color:var(--encre-douce);margin:0}
.localiser__etat{font-size:.9rem;font-weight:700;color:var(--roi);margin:0;font-variant-numeric:tabular-nums}
.localiser__etat[hidden]{display:none}
.b-formulaire .localiser{font:600 .88rem var(--texte);justify-self:start;display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.35rem .95rem;margin-top:.15rem;border-radius:999px;border:1.5px solid var(--bleu);background:var(--ciel-pale);color:var(--encre);cursor:pointer}
.b-formulaire .localiser:hover{background:var(--ciel-clair)}
.resa__wa{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--encre-douce);margin:0}
.resa__wa svg{flex:none;color:var(--wa)}
.resa__quand{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.resa__quand[hidden]{display:none}
.compteur{display:flex;align-items:center;justify-content:space-between;background:var(--gris);border-radius:var(--arrondi);padding:.35rem .5rem .35rem 1rem;min-height:3.4rem;font-weight:600}
.compteur__boutons{display:flex;align-items:center;gap:.4rem}
.compteur__boutons button{width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--fond);font-size:1.3rem;line-height:1;cursor:pointer;color:var(--encre)}
.compteur__boutons button:hover{background:var(--ciel-clair)}
.compteur output{min-width:1.6rem;text-align:center;font-variant-numeric:tabular-nums}
.resa__actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}
.heros__visuel{position:relative;min-height:34rem}
.heros__photo--grande{width:78%;height:34rem;object-fit:cover;border-radius:var(--arrondi);margin-left:auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.heros__visuel .telephone{position:absolute;left:0;bottom:-1.5rem}

/* le téléphone : quatre écrans qui se suivent, ce que la réservation déclenche */
.telephone{margin:0;display:grid;justify-items:center;gap:.7rem}
.telephone__cadre{width:min(15.5rem,62vw);aspect-ratio:9/18.5;border-radius:2.4rem;padding:.6rem;background:var(--encre);box-shadow:0 30px 60px -20px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.06)}
.telephone__ecran{position:relative;width:100%;height:100%;border-radius:1.9rem;overflow:hidden;background:var(--fond)}
.telephone__ecran::before{content:"";position:absolute;top:.55rem;left:50%;width:4.2rem;height:1.15rem;margin-left:-2.1rem;border-radius:1rem;background:var(--encre);z-index:3}
.ecran{position:absolute;inset:0;padding:2.8rem 1.1rem 1.3rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;text-align:center;color:var(--encre)}
.ecran__pastille{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;margin:0 auto .3rem;background:var(--turquoise);color:var(--encre)}
.ecran__titre{font:600 1.08rem/1.2 var(--titre);margin:0}
.ecran__ligne{margin:0;font-size:.86rem;color:var(--encre-douce)}
.ecran__ligne--fort{font-weight:700;color:var(--encre)}
.ecran__note{margin:.5rem 0 0;font-size:.78rem;font-weight:700}
.ecran__appli{margin:0 0 .2rem;font:600 .74rem var(--titre);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
.mail{background:var(--gris);border-radius:14px;padding:.9rem;text-align:left}
.mail__de{margin:0;font-size:.72rem;color:var(--encre-douce)}
.mail__objet{margin:.2rem 0 .5rem;font:600 .9rem/1.25 var(--titre)}
.mail__texte{margin:0;font-size:.8rem;line-height:1.5}
.mail__signe{margin:.5rem 0 0;font-size:.78rem;font-weight:700}
.demande{background:var(--gris);border-radius:14px;padding:.9rem;text-align:left;display:grid;gap:.35rem}
.demande__etat{justify-self:start;padding:.2rem .6rem;border-radius:999px;background:var(--turquoise-pale);color:var(--encre);font:700 .72rem var(--texte);box-shadow:inset 0 0 0 1.5px var(--turquoise)}
.demande__trajet{margin:.2rem 0 0;font:600 .9rem/1.25 var(--titre)}
.demande__quand{margin:0;font-size:.78rem;color:var(--encre-douce)}
.demande__choix{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.5rem}
.demande__choix span{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.5rem .3rem;border-radius:999px;font:700 .74rem var(--texte)}
.demande__refuser{background:var(--fond);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--gris-fonce)}
.demande__accepter{background:var(--bleu);color:var(--fond)}
.agenda{background:var(--gris);border-radius:14px;padding:.9rem;text-align:left}
.agenda__jour{margin:0 0 .6rem;font:600 .9rem var(--titre)}
.agenda__creneau{display:grid;gap:.15rem;padding:.7rem .8rem;border-radius:10px;background:var(--ciel);color:var(--encre)}
.agenda__heure{font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
.agenda__objet{font:600 .86rem/1.3 var(--titre)}
.agenda__note{display:flex;gap:.35rem;align-items:flex-start;margin:.7rem 0 0;font-size:.74rem;font-weight:700;color:var(--encre)}
.agenda__note svg{flex:none;margin-top:.05rem}
.etoiles{margin:.2rem 0;font-size:1.7rem;letter-spacing:.18em;color:var(--or)}
.ecran__bouton{display:inline-block;margin:.2rem auto 0;padding:.6rem .95rem;border-radius:999px;background:var(--bleu);color:var(--fond);font:600 .78rem var(--texte)}
.telephone figcaption{font:600 .76rem var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce);display:flex;align-items:center;gap:.5rem}
.points{display:inline-flex;gap:.3rem}
.points i{width:.42rem;height:.42rem;border-radius:50%;background:var(--gris-fonce)}
@media (prefers-reduced-motion:no-preference){
  .ecran{opacity:0;animation:ecran 20s ease-in-out infinite}
  .ecran--2{animation-delay:4s}.ecran--3{animation-delay:8s}.ecran--4{animation-delay:12s}.ecran--5{animation-delay:16s}
  .points i{animation:point 20s ease-in-out infinite}
  .points i:nth-child(2){animation-delay:4s}.points i:nth-child(3){animation-delay:8s}.points i:nth-child(4){animation-delay:12s}.points i:nth-child(5){animation-delay:16s}
  .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .apparait.vu{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.ecran--1,.ecran--3,.ecran--4,.ecran--5{display:none}.points{display:none}}
@keyframes ecran{0%{opacity:0;transform:translateY(10px)}3%{opacity:1;transform:none}17%{opacity:1;transform:none}20%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
@keyframes point{0%,19%{background:var(--encre)}20%,100%{background:var(--gris-fonce)}}

/* ── LES SECTIONS ── */
.section{padding:var(--marge-section)}
.section--gris{background:var(--ciel-pale)}
.section--ciel{background:var(--ciel-clair)}
.section--turquoise{background:var(--turquoise-pale)}
.section--degrade{background:var(--degrade);color:var(--encre)}
/* sur une section déjà teintée, les cartes restent blanches pour se détacher */
:is(.section--ciel,.section--turquoise,.section--gris,.section--degrade) :is(.carte,.formule-carte,.etape){background:var(--fond)}
:is(.section--ciel,.section--turquoise,.section--gris,.section--degrade) .carte:hover{background:var(--ciel-pale)}
.section__wrap{max-width:var(--largeur);margin:0 auto}
.section__titre{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 clamp(1.5rem,3.5vw,2.4rem);text-align:center}
.section__titre::after{content:"";display:block;width:3rem;height:3px;border-radius:2px;background:var(--or);margin:.85rem auto 0}

/* ce que vous pouvez faire : trois cartes grises, centrées, entièrement cliquables */
.cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cartes li{display:flex}
.carte{flex:1;background:var(--ciel-clair);border-radius:var(--arrondi);padding:1.8rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;text-decoration:none;color:var(--encre);border:2px solid transparent;transition:border-color .15s ease,background-color .15s ease}
.carte:hover{border-color:var(--bleu);background:var(--ciel)}
.carte__icone{flex:none;width:4rem;height:4rem;border-radius:50%;background:var(--turquoise);color:var(--encre);display:grid;place-items:center;margin:0 0 .2rem}
.carte__titre{font:600 1.25rem/1.2 var(--titre);letter-spacing:-.02em}
.carte__texte{font-size:.95rem;color:var(--encre-douce);flex:1}
.carte .pastille{margin-top:.4rem}

/* les horaires, sur sa couleur */
.horaires__wrap{display:grid;justify-items:center;gap:.8rem;text-align:center;max-width:44rem}
.horaires__icone{width:3.6rem;height:3.6rem;border-radius:50%;background:var(--turquoise);display:grid;place-items:center;color:var(--encre)}
.horaires h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.horaires p{margin:0;font:500 clamp(1.15rem,2.2vw,1.4rem)/1.45 var(--titre);color:var(--encre)}

/* photo et texte côte à côte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.duo__photo img{width:100%;height:clamp(20rem,40vw,30rem);object-fit:cover;border-radius:var(--arrondi);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.duo__texte h2{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 1rem}
.duo__texte p{color:var(--encre-douce);margin:0 0 1.6rem;max-width:30rem;font-size:1.05rem}
.duo__texte .duo__note{margin:1.4rem 0 0;font-size:.95rem}
.duo__note a{color:var(--roi);font-weight:700}
.duo__note a:hover{color:var(--encre)}
.sur-titre{font-weight:700;font-size:.9rem;margin:0 0 .6rem !important;color:var(--encre) !important}
.coches{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:1rem;max-width:30rem}
.coches li{display:flex;gap:.8rem;align-items:flex-start;color:var(--encre)}
.coches svg{flex:none;width:1.6rem;height:1.6rem;padding:.25rem;border-radius:50%;background:var(--turquoise);color:var(--encre)}
.coches--clair li{color:var(--encre-douce)}

/* les pages : un bandeau du bleu ciel au turquoise, le titre et sa phrase */
.bandeau{background:var(--degrade);padding:clamp(3rem,7vw,5rem) 1.25rem}
.bandeau__wrap{max-width:52rem;margin:0 auto;text-align:center}
.bandeau h1{font-size:clamp(2.2rem,5.5vw,3.8rem);color:var(--encre)}
.bandeau h1 em{color:var(--encre)}  /* sur le dégradé, le bleu franc ne se lirait pas : le titre reste d'une seule encre */
.bandeau p{margin:1.1rem auto 0;max-width:40rem;font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--encre)}

/* l'aéroport : deux formules côte à côte */
.formules-cartes{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:60rem}
.formule-carte{background:var(--ciel-clair);border-radius:var(--arrondi);padding:2rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.formule-carte h3{font-size:1.4rem}
.formule-carte p{margin:0;color:var(--encre-douce);max-width:26rem}
.formule-carte .formule-carte__prix{font:600 1.05rem var(--titre);color:var(--encre);font-variant-numeric:tabular-nums;flex:1;display:flex;align-items:flex-end;padding-bottom:.4rem}
.photo-large{margin:clamp(2rem,5vw,3.5rem) 0 0}
.photo-large img{width:100%;height:clamp(16rem,42vw,32rem);object-fit:cover;object-position:72% 70%;border-radius:var(--arrondi);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* les tarifs : trois listes, le prix en face de sa ligne */
.tarifs{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.tarifs__grille{display:grid;gap:2.2rem}
.tarifs__groupe h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 .8rem}
.tarifs__liste{list-style:none;margin:0;padding:0;border-top:2px solid var(--encre)}
.tarif{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.2rem;padding:.9rem 0;border-bottom:1px solid var(--gris-fonce)}
.tarif__nom{font-weight:700}
.tarif__prix{font:600 1.1rem var(--titre);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tarif__quand{grid-column:1/-1;font-size:.92rem;color:var(--encre-douce)}
.tarifs__cote{position:sticky;top:6rem;display:grid;gap:1rem}
.tarifs__carte{display:grid;justify-items:center;gap:.9rem;padding:2rem 1.5rem;border-radius:var(--arrondi);background:var(--degrade);text-align:center}
.tarifs__carte .carte__icone{background:var(--fond)}
.tarifs__cle{margin:0;font:600 1.2rem/1.35 var(--titre);color:var(--encre)}
.tarifs__cote h2{font-size:1.35rem;margin-top:.6rem}
.tarifs__cote .coches{margin:0}
.source{max-width:46rem;display:grid;justify-items:center;gap:1.2rem;text-align:center}
.source p{margin:0;color:var(--encre)}

/* comment ça marche : les étapes, centrées, au téléphone comme sur ordinateur */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.etape{background:var(--ciel-clair);border-radius:var(--arrondi);padding:1.8rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.etape__numero{width:3rem;height:3rem;border-radius:50%;background:var(--turquoise);color:var(--encre);display:grid;place-items:center;font:600 1.25rem var(--titre);font-variant-numeric:tabular-nums}
.etape h3{font-size:1.15rem}
.etape p{margin:0;font-size:.95rem;color:var(--encre-douce)}
.exemple{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:center}
.exemple__texte h2{font-size:clamp(2rem,4.2vw,3rem);color:var(--encre);margin:0 0 1rem}
.exemple__texte p{margin:0;max-width:30rem;font-size:1.05rem;color:var(--encre)}
.section--degrade .telephone figcaption{color:var(--encre)}
.section--degrade .points i{background:rgba(255,255,255,.6)}

/* la page suivante : une grande carte cliquable */
.suivante{display:grid;justify-items:center;gap:.5rem;text-align:center;padding:clamp(2rem,5vw,3.2rem) 1.5rem;border-radius:var(--arrondi);background:var(--degrade);color:var(--encre);text-decoration:none;transition:background-color .15s ease}
.suivante:hover{filter:saturate(1.15)}
.suivante__sur{font-weight:700;font-size:.9rem;color:var(--encre)}
.suivante__titre{font:600 clamp(1.7rem,3.6vw,2.4rem)/1.1 var(--titre);letter-spacing:-.02em}
.suivante__texte{max-width:34rem;color:var(--encre)}
.suivante__fleche{width:3.2rem;height:3.2rem;margin-top:.5rem;border-radius:50%;background:var(--fond);color:var(--encre);display:grid;place-items:center}

/* les avis : la place est prête, vide tant qu'il n'y en a pas de vrais */
.avis{background:var(--fond);border-radius:var(--arrondi);padding:2rem 1.5rem;max-width:36rem;text-align:center;margin:0 auto}
.avis__note{font-size:2rem;letter-spacing:.2em;color:var(--or)}
.avis__vide{font:600 1.15rem var(--titre);margin:.6rem 0 .4rem !important}
.avis p{margin:0;color:var(--encre-douce)}

/* le formulaire de réservation (bloc de la fabrique) : sur chaque page, ouvert dans la fenêtre */
.b-formulaire{padding:var(--marge-section);background:var(--fond)}
.fenetre-ok .b-formulaire--repli{display:none}
.b-formulaire__wrap{width:100%;max-width:44rem;margin:0 auto}
.b-formulaire__titre{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 .5rem}
.b-formulaire__sous{margin:0 0 1.6rem;color:var(--encre-douce)}
.b-formulaire__form{display:grid;gap:1rem}
.b-formulaire__ligne{display:grid;gap:1rem}
.b-formulaire .field{display:grid;gap:.35rem}
.b-formulaire .field label{font-weight:700;font-size:.9rem}
.b-formulaire input:not([type=checkbox]):not([type=radio]),.b-formulaire textarea,.b-formulaire select{font:inherit;font-size:1rem;color:var(--encre);width:100%;min-height:3.2rem;padding:.75rem .9rem;
  border-radius:var(--arrondi);border:2px solid transparent;background:var(--gris)}
.b-formulaire textarea{min-height:6rem;resize:vertical}
.b-formulaire input:focus-visible,.b-formulaire textarea:focus-visible{outline:none;border-color:var(--bleu);background:var(--fond)}
.b-formulaire__accord{display:flex;gap:.6rem;align-items:flex-start;color:var(--encre-douce);font-size:.9rem;line-height:1.45}
.b-formulaire__accord input{width:1.2rem;height:1.2rem;margin-top:.15rem;accent-color:var(--roi);flex:none}
.b-formulaire__bouton{font:600 1.05rem var(--texte);min-height:3.3rem;border:0;border-radius:var(--arrondi);background:var(--bleu);color:var(--fond);cursor:pointer}
.b-formulaire__bouton:hover{background:var(--roi)}
.b-formulaire__retour{margin:0;padding:.85rem 1rem;border-radius:var(--arrondi);background:var(--ciel-pale);color:var(--encre)}
/* l'aéroport dans le formulaire : trois choix visibles, la formule se voit */
.formules{margin:0;padding:0;border:0;display:grid;gap:.5rem}
.formules legend{font-weight:700;font-size:.9rem;padding:0;margin:0 0 .5rem}
.formules__aide{margin:0;font-size:.9rem;font-weight:700;color:var(--encre)}
.formules__aide[hidden]{display:none}
.formules__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.formule{display:grid;align-content:start;gap:.2rem;padding:.75rem .85rem .75rem 2.5rem;border-radius:var(--arrondi);background:var(--gris);border:2px solid transparent;cursor:pointer;position:relative;min-height:3.2rem}
.formule input{position:absolute;left:.85rem;top:.95rem;width:1.15rem;height:1.15rem;margin:0;accent-color:var(--roi)}
.formule__nom{font-weight:700;font-size:.95rem;line-height:1.3}
.formule__aide{font-size:.82rem;color:var(--encre-douce);line-height:1.35}
.formule:has(input:checked){border-color:var(--roi);background:var(--fond)}
.formule:has(input:focus-visible){outline:3px solid var(--encre);outline-offset:2px}
.formules.a-choisir .formule:not(:first-child){border-color:var(--encre);background:var(--ciel-pale)}
@media (min-width:40rem){.b-formulaire__ligne{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.formules__liste{grid-template-columns:1fr}}

/* les questions */
.questions{max-width:48rem;margin:0 auto}
.questions details{border-bottom:1px solid var(--gris-fonce)}
.questions summary{font:600 1.1rem var(--titre);padding:1.15rem 2.5rem 1.15rem 0;cursor:pointer;list-style:none;position:relative}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--encre)}
.questions details[open] summary::after{content:"−"}
.questions p{margin:0 0 1.2rem;color:var(--encre-douce)}

/* le contact */
.contact__grille{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.contact h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.contact__boutons{display:flex;flex-wrap:wrap;gap:.6rem}
.contact p{color:var(--encre-douce);margin:.8rem 0 1.4rem;max-width:30rem}
.contact__infos{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.contact__infos div{background:var(--fond);border-radius:var(--arrondi);padding:1rem 1.2rem}
.contact__infos dt{font-weight:600;font-size:.82rem;color:var(--encre-douce)}
.contact__infos dd{margin:.2rem 0 0;font:600 1.12rem/1.3 var(--titre)}
.contact__infos dd a{color:var(--roi);font-variant-numeric:tabular-nums}
.contact__infos dd a:hover{color:var(--encre)}
/* une carte seule sur sa ligne prend toute la largeur : pas de trou à côté d'elle */
.contact__infos div:last-child:nth-child(odd){grid-column:1/-1}

/* ── LE PIED NOIR ── */
.pied{background:var(--ciel-clair);color:var(--encre-douce);padding:3.5rem 1.25rem 1.4rem}
.pied__wrap{max-width:var(--largeur);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.pied__logo{display:block;height:7.5rem;width:auto;margin:0 0 .8rem}
.pied__nom{font:600 1.3rem var(--titre);color:var(--encre);margin:0 0 .5rem}
.pied p{margin:0 0 .4rem;max-width:22rem}
.pied h2{font:600 1rem var(--texte);color:var(--encre);margin:0 0 .8rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.pied a{color:var(--encre-douce);text-decoration:none;display:inline-block;padding:.45rem 0}
.pied a:hover{color:var(--encre)}
.pied__marque a{color:var(--roi);font-weight:700;font-variant-numeric:tabular-nums}
.pied .pied__bas{max-width:var(--largeur);margin:2.6rem auto 0;padding-top:1.1rem;border-top:1px solid rgba(11,42,51,.15);font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem}
.pied__bas a{text-decoration:underline;text-underline-offset:.18em}

/* le bouton collé en bas, au téléphone seulement : réserver, ou appeler */
.collant{display:none}

/* les pages de texte */
.doc{max-width:46rem;margin:0 auto}
.doc h2{font-size:clamp(1.4rem,3vw,1.8rem);margin:2.2rem 0 .7rem}
.doc p{color:var(--encre-douce)}
.doc a{color:var(--roi)}

/* ── L'ORDINATEUR MOYEN : le menu se resserre ; sous 70rem, appeler et WhatsApp restent dans « Me joindre » ── */
@media (max-width:75rem){
  .nav a{padding:.5rem .55rem}
}
@media (max-width:70rem){
  .entete__rond{display:none}
}
/* entre 62 et 68rem, le menu complet et « Taxi Tams » tiennent si la langue garde son globe seul */
@media (min-width:62rem) and (max-width:68rem){
  .entete__droite{gap:.25rem}
  .langue__bouton{padding:.4rem .55rem}
  .langue__bouton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* sur les plus petits téléphones (320 px), le badge seul */
@media (max-width:22.4rem){
  .marque__nom{display:none}
}

/* ── LE TÉLÉPHONE : tout se centre, sauf les listes ── */
@media (max-width:62rem){
  .heros__wrap,.duo,.contact__grille,.tarifs,.exemple{grid-template-columns:1fr}
  .heros__texte{text-align:center}
  .heros__lieu{justify-content:center}
  .heros h1{margin-left:auto;margin-right:auto}
  .resa{margin:0 auto;text-align:left}
  .quand,.raccourci,.raccourcis{justify-self:center}
  .raccourcis{justify-content:center}
  .heros .localiser__aide,.heros .localiser__etat{text-align:center}
  .resa__wa{justify-content:center;text-align:center}
  .resa__actions,.contact__boutons{justify-content:center}
  .heros__visuel{min-height:0;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end}
  .heros__photo--grande{width:100%;height:22rem;margin:0}
  .heros__visuel .telephone{position:static}
  .heros__visuel .telephone__cadre{width:min(11rem,40vw)}
  .cartes,.formules-cartes{grid-template-columns:1fr;max-width:32rem;margin:0 auto}
  .etapes{grid-template-columns:1fr 1fr}
  .duo__texte,.exemple__texte,.contact__grille>div:first-child{text-align:center}
  .duo__texte p,.exemple__texte p,.contact p{margin-left:auto;margin-right:auto}
  .duo__photo{order:2}
  .exemple{justify-items:center}
  .tarifs__cote{position:static;max-width:28rem;margin:0 auto}
  .tarifs__cote h2{text-align:center}
  .nav{display:none;position:fixed;inset:4rem 0 auto 0;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1rem 1rem;background:var(--fond);box-shadow:0 18px 30px rgba(0,0,0,.35)}
  .nav.ouvert{display:flex}
  .nav a{padding:.9rem .6rem;border-radius:8px;font-size:1.05rem;text-align:center}
  .burger{display:inline-block}
  .entete__resa,.entete__rond{display:none}
  .pied__wrap{grid-template-columns:1fr 1fr;text-align:center}
  .pied__marque{grid-column:span 2}
  .pied__marque p{margin-left:auto;margin-right:auto}
  .pied__logo{margin:0 auto .8rem}
  .pied .pied__bas{justify-content:center;text-align:center}
  /* les trois boutons flottent seuls au-dessus de la page, sans bande derrière (le Don, 11/10 23h44) ; chacun porte sa
     petite ombre pour se détacher du contenu ; entre eux, le doigt touche la page */
  .collant{display:flex;gap:.6rem;position:fixed;inset:auto 0 0 0;z-index:30;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));pointer-events:none}
  .collant>*{pointer-events:auto;box-shadow:0 10px 24px -8px rgba(1,34,68,.5)}
  .collant__resa{flex:1}
  .collant__rond{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--fond);color:var(--roi);display:grid;place-items:center}
  .collant__rond--wa{background:var(--wa);color:var(--fond)}
  body{padding-bottom:4.6rem}
}
@media (max-width:30rem){
  .heros__visuel{grid-template-columns:1fr}
  .heros__visuel .telephone{display:none}
  .etapes{grid-template-columns:1fr}
  .contact__infos{grid-template-columns:1fr}
  .marque img{height:2.5rem}
  .marque__nom{font-size:1.02rem}
  /* le badge ET son nom tiennent sur un petit téléphone : espaces resserrés, la langue garde son globe seul */
  .entete__wrap{gap:.6rem;padding-left:1rem;padding-right:1rem}
  .marque{gap:.4rem}
  .entete__droite{gap:.25rem}
  .langue__bouton{padding:.4rem .55rem}
  .langue__bouton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .entete__h24{padding:.3rem .65rem;font-size:.82rem}
}

/* L'agenda fait maison (agenda.js et agenda.css de la fabrique, T772) DANS une pastille à icône : il se fond dans la
   pastille, qui porte déjà son icône, sa forme et son fond. Avec sa propre bordure, ses marges et son icône, le bouton
   élargissait la grille « Planifier » (deux colonnes 1fr) : la page passait à 480 px au téléphone (mesuré le 14/10). */
.champ-icone .agm{flex:1;min-width:0;contain:inline-size}   /* sa largeur vient de la grille, jamais de son texte */
.champ-icone .agm-bouton{display:block;min-height:3rem;line-height:3rem;padding:0;border:0;background:transparent;
  font:500 1.02rem var(--texte);color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.champ-icone .agm--vide .agm-bouton{color:#6b6b6b}
.champ-icone .agm-bouton::after{display:none}   /* la pastille n'a pas de chevron, comme « Destination » */
.champ-icone .agm--date .agm-bouton{padding-left:0}
.champ-icone .agm--date .agm-bouton::before{display:none}   /* la pastille porte déjà son icône */
.champ-icone .agm-bouton:focus-visible,.champ-icone .agm.agm--ouvert .agm-bouton{outline:none}
/* Les boutons de l'en-tête à 44 px, sur ordre du Don (19/10/2026) */
.entete__resa{min-height:2.75rem}.langue__bouton{min-width:2.75rem;justify-content:center}

/* Ordre18 : une ligne continue, sans carte ni numéro. */
.parcours-course{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;text-align:center}
.parcours-course__arret{position:relative;padding:2rem 1.2rem 0;border-top:2px solid var(--turquoise)}
.parcours-course__arret::before{content:"";position:absolute;width:.7rem;height:.7rem;border-radius:50%;background:var(--turquoise);top:-.4rem;left:calc(50% - .35rem)}
.parcours-course h3{font-size:1.15rem}.parcours-course p{margin:.6rem 0 0;color:var(--encre-douce)}
@media(max-width:700px){.parcours-course{display:block;max-width:38rem;margin:auto}.parcours-course__arret{padding:1.4rem 1rem 1.4rem 2rem;border-top:0;border-left:2px solid var(--turquoise);text-align:left}.parcours-course__arret::before{top:1.8rem;left:-.4rem}}