/* ==========================================================================
   Perfect Dental — Dr Smouni Fadwa, Mohammedia
   Palette : bleu de confiance + vert repris de la carte de visite,
             appel à l'action orange (contraste volontaire)
   Typo    : Figtree (titres) / Noto Sans (texte)
   ========================================================================== */
:root{
  /* Couleurs relevées sur le logo de la carte de visite.
     --logo-green et --logo-ochre sont décoratifs (trait, point) ;
     pour du texte, n'utiliser que --logo-blue (5,9:1) ou --leaf-700 (5,4:1). */
  --logo-green:#4F9A6A;
  --logo-blue:#3E6FA8;
  --logo-ochre:#C9BC4E;
  --leaf-700:#4A7526;

  /* Brand */
  --brand-50:#F0F9FF;
  --brand-100:#E0F2FE;
  --brand-200:#BAE6FD;
  --brand-300:#7DD3FC;
  --brand-400:#38BDF8;
  --brand-500:#0EA5E9;
  --brand-600:#0284C7;
  --brand-700:#0369A1;
  --brand-900:#0C4A6E;

  /* Warm CTA. Buttons use --cta-600 (5.1:1 with white) — #F97316 only reaches
     2.8:1 and cannot legally carry white button text. --cta-400 is decorative. */
  --cta-400:#FB923C;
  --cta-500:#EA580C;
  --cta-600:#C2410C;
  --cta-700:#9A3412;

  /* Neutrals — all body text ≥ 7:1 on white */
  --ink:#0C4A6E;
  --body:#334155;
  --muted:#475569;
  --line:#E2E8F0;
  --line-soft:#EEF4F8;
  --bg:#FFFFFF;
  --surface:#F8FBFD;

  /* Shape & depth */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-full:999px;
  --shadow-sm:0 1px 2px rgba(12,74,110,.06), 0 1px 3px rgba(12,74,110,.05);
  --shadow-md:0 4px 12px rgba(12,74,110,.07), 0 2px 4px rgba(12,74,110,.04);
  --shadow-lg:0 18px 40px rgba(12,74,110,.10), 0 4px 12px rgba(12,74,110,.05);
  --shadow-xl:0 30px 70px rgba(12,74,110,.16);
  --ring:0 0 0 3px rgba(14,165,233,.35);

  /* Logo (logo.png fait 480 × 319, soit un ratio de 1,505) */
  --logo-w:84px;
  --logo-h:56px;

  /* Rhythm */
  --container:1160px;
  --gutter:clamp(1rem, 4vw, 2rem);
  --section-y:clamp(3.5rem, 8vw, 6.5rem);

  /* Motion */
  --t-fast:150ms;
  --t:220ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Z-index scale */
  --z-header:50;
  --z-mobilebar:60;
  --z-modal:100;
  --z-skip:110;
  --z-intro:200;
  --z-progress:55;
}

/* ==========================================================================
   Barre de progression de lecture
   ========================================================================== */
.progression{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:var(--z-progress);pointer-events:none;background:transparent;
}
.progression i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--logo-green),var(--brand-500));
  transform:scaleX(0);transform-origin:0 50%;
  /* mise à l'échelle plutôt que largeur : composé par le GPU, pas de reflow */
  will-change:transform;
}

/* ==========================================================================
   Animation d'ouverture — le logo tourne, puis le voile se lève
   ========================================================================== */
.intro{display:none}
.js .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:var(--z-intro);
  background:linear-gradient(160deg,#fff 0%,var(--brand-50) 55%,#E4F1FA 100%);
  /* Filet de sécurité : même si le JS échoue après avoir posé la classe .js,
     le voile se retire tout seul. Sans cela, une erreur bloquerait le site. */
  animation:introFailsafe .5s var(--ease) 2.8s forwards;
}
.js .intro.is-out{
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease), visibility 0s linear .55s;
}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}

.intro-logo{
  width:min(52vw,280px);aspect-ratio:480/319;
  perspective:900px;
  animation:introPop .75s var(--ease) both;
}
@keyframes introPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.intro-logo-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  animation:brandSpin 1.3s linear infinite;
}
.intro-logo-inner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.intro-logo-inner img + img{transform:rotateY(180deg)}
/* Même principe que dans l'en-tête : une tranche donne de l'épaisseur au logo
   pour qu'il ne s'efface pas deux fois par tour en passant de profil. */
.intro-edge{
  position:absolute;left:50%;top:12%;height:76%;width:9px;margin-left:-4.5px;
  border-radius:5px;transform:rotateY(90deg);
  background:linear-gradient(180deg,#7FBF3F,#2E8B74 45%,#14544A);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Figtree, system-ui, sans-serif;color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-700);text-decoration-thickness:1px;text-underline-offset:3px}
ul{margin:0;padding:0;list-style:none}
svg{width:1.25rem;height:1.25rem;flex:none}

/* Keyboard focus — visible everywhere, never on mouse click */
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:var(--z-skip);
  transform:translateY(-160%);
  background:var(--brand-700);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;transition:transform var(--t) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* Anchors clear the sticky header */
section[id]{scroll-margin-top:88px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--brand-600);
  --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.35rem;
  font:600 .975rem/1.2 Figtree, system-ui, sans-serif;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid transparent;border-radius:var(--r-full);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  min-height:44px; /* touch target */
  transition:background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn svg{width:1.05rem;height:1.05rem;transition:transform var(--t) var(--ease)}
.btn:hover svg{transform:scale(1.12)}
.btn-primary{--btn-bg:var(--brand-700);box-shadow:var(--shadow-sm)}
.btn-primary:hover{--btn-bg:var(--brand-900);box-shadow:var(--shadow-md)}
.btn-cta{--btn-bg:var(--cta-600);box-shadow:0 6px 18px rgba(194,65,12,.26)}
.btn-cta:hover{--btn-bg:var(--cta-700);box-shadow:0 10px 26px rgba(154,52,18,.32)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--brand-700);border-color:var(--brand-200)}
.btn-ghost:hover{--btn-bg:var(--brand-50);border-color:var(--brand-300)}
.btn-sm{padding:.6rem 1.05rem;font-size:.9rem}
.btn-block{width:100%}
.btn:disabled,.btn[aria-busy="true"]{opacity:.65;cursor:progress}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;min-height:76px}

/* --------------------------------------------------------------------------
   Bloc logo. Le fichier logo.png porte déjà le nom « PERFECT DENTAL » :
   aucun libellé texte à côté, sinon le nom apparaîtrait deux fois.
   -------------------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none}
.brand-mark{display:block;flex:none;width:var(--logo-w);height:var(--logo-h)}
.brand-mark img{width:100%;height:100%;object-fit:contain}

/* Le logo de l'en-tête reste fixe, de face, sur toutes les pages.
   La rotation 3D n'existe plus que sur l'écran d'ouverture (.intro). */
@keyframes brandSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

.nav{display:flex;gap:.35rem}
.nav a{
  display:block;padding:.5rem .8rem;border-radius:var(--r-full);
  color:var(--body);font-weight:600;font-size:.94rem;text-decoration:none;
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav a:hover{color:var(--brand-700);background:var(--brand-50)}
.nav a.active{color:var(--brand-700);background:var(--brand-100)}

.header-actions{display:flex;align-items:center;gap:.6rem}
.header-phone{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--ink);font-weight:700;font-size:.94rem;text-decoration:none;
  padding:.5rem .6rem;min-height:44px;border-radius:var(--r-full);
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.header-phone:hover{color:var(--brand-700);background:var(--brand-50)}
.header-phone svg{width:1rem;height:1rem;color:var(--brand-500)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);cursor:pointer;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-toggle:hover{background:var(--brand-50);border-color:var(--brand-200)}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(760px 460px at 88% -10%, var(--brand-100), transparent 62%),
    radial-gradient(620px 420px at -10% 8%, #ECFEFF, transparent 60%),
    linear-gradient(180deg, var(--brand-50), #fff 72%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-copy .lede{font-size:clamp(1.02rem,.97rem + .3vw,1.15rem);color:var(--muted);max-width:56ch;margin-bottom:1.75rem}
.hero h1{margin-bottom:1.1rem;max-width:16ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 1rem;padding:.4rem .85rem;
  background:#fff;border:1px solid var(--brand-200);border-radius:var(--r-full);
  color:var(--brand-700);font:600 .82rem/1 Figtree, system-ui, sans-serif;
  letter-spacing:.02em;box-shadow:var(--shadow-sm);
}

.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.hero-points li{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:500;color:var(--muted)}
.hero-points svg{width:1rem;height:1rem;color:#16A34A}

.hero-media{position:relative}
.hero-figure{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--brand-50)}
.hero-figure img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 600ms var(--ease);
}
.hero-figure:hover img{transform:scale(1.03)}

/* Flottement très lent de la carte d'adresse : 6 px, 7 s. */
@keyframes flotte{50%{transform:translateY(-6px)}}
.floating-card{
  animation:flotte 7s ease-in-out infinite;
  position:absolute;left:-.75rem;bottom:-1.25rem;
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1.1rem;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
}
.floating-card strong{display:block;font:700 .88rem/1.3 Figtree, system-ui, sans-serif;color:var(--ink)}
.floating-card span{font-size:.85rem;color:var(--muted)}
.fc-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--brand-50);color:var(--brand-600)}

/* ==========================================================================
   En-tête de page intérieure (contact.html)
   ========================================================================== */
.page-header{
  padding-block:clamp(1.75rem,4vw,3rem) clamp(1.5rem,3.5vw,2.5rem);
  background:
    radial-gradient(680px 380px at 88% -20%, var(--brand-100), transparent 62%),
    linear-gradient(180deg, var(--brand-50), #fff 88%);
  border-bottom:1px solid var(--line-soft);
}
.page-header h1{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.8rem);margin-bottom:.9rem}
.page-header .lede{color:var(--muted);font-size:clamp(1rem,.97rem + .25vw,1.1rem);max-width:60ch;margin:0}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.1rem;font-size:.88rem}
.breadcrumb a{color:var(--brand-700);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span[aria-hidden]{color:#64748B}
.breadcrumb [aria-current]{color:var(--muted)}

/* Blocs pratiques de la page contact */
.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.access-item{
  background:#fff;padding:1.5rem 1.4rem;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.access-item .ii{margin-bottom:1rem}
.access-item h3{margin-bottom:.45rem;font-size:1.05rem}
.access-item p{margin:0;color:var(--muted);font-size:.94rem}

/* ==========================================================================
   Mention « à compléter » (page contact : horaires non communiqués)
   ========================================================================== */
.todo-inline{color:#92400E;font-style:italic}

/* ==========================================================================
   Bandeau d'appel à l'action (bas de page d'accueil)
   ========================================================================== */
.cta-band{
  padding-block:clamp(2.5rem,5vw,3.75rem);
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700));
}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem}
.cta-copy{flex:1 1 34ch;min-width:0}
.cta-copy h2{color:#fff;margin-bottom:.6rem}
.cta-copy p{margin:0;color:#BAE6FD;font-size:1.02rem;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-on-dark{--btn-fg:#fff;border-color:rgba(255,255,255,.45)}
.btn-on-dark:hover{--btn-bg:rgba(255,255,255,.14);--btn-fg:#fff;border-color:#fff}

/* ==========================================================================
   Section heads
   ========================================================================== */
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{margin-bottom:.85rem;position:relative;padding-bottom:.7rem}
.section-head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--logo-green),var(--brand-500));
  transform:scaleX(1);transform-origin:0 50%;
  transition:transform .65s var(--ease) .12s;
}
/* Sans JS le trait est déjà là ; avec JS il se dessine quand la section apparaît. */
.js .section-head.reveal h2::after{transform:scaleX(0)}
.js .section-head.reveal.in h2::after{transform:scaleX(1)}
.section-sub{color:var(--muted);font-size:1.02rem;margin:0}

/* ==========================================================================
   Services
   ========================================================================== */
.services{background:var(--surface);border-block:1px solid var(--line-soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}

/* Photo-led service cards: image band on top, text block beneath. */
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.card:hover{border-color:var(--brand-200);box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.card-media{
  width:100%;aspect-ratio:19/14;object-fit:cover;display:block;
  background:var(--brand-50); /* réserve la place pendant le chargement */
  transition:transform 600ms var(--ease);
}
.card:hover .card-media{transform:scale(1.045)}
.card-body{padding:1.3rem 1.35rem 1.5rem}
.card h3{margin-bottom:.5rem;font-size:1.15rem;text-wrap:balance}
.card p{color:var(--muted);font-size:.945rem;margin:0}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-media img{
  width:100%;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
}
.about-copy h2{margin-bottom:1rem}
.about-copy p{color:var(--muted)}
.about-list{display:grid;gap:.7rem;margin:1.5rem 0 1.9rem}
.about-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:.96rem;color:var(--body)}
.about-list span{
  display:grid;place-items:center;width:24px;height:24px;flex:none;margin-top:1px;
  border-radius:50%;background:#DCFCE7;color:#15803D;
}
.about-list svg{width:14px;height:14px}

/* ==========================================================================
   Avis patients — carrousel
   Mise en page reprise de la maquette : la fiche centrale est mise en avant,
   les voisines restent visibles en retrait. Couleurs du site plutôt que l'ocre
   de la maquette, pour ne pas casser l'identité bleu/vert.
   ========================================================================== */
.avis{background:var(--surface);border-block:1px solid var(--line-soft)}
.avis .section-head{margin-inline:auto;text-align:center}
.avis .section-head h2::after{left:50%;margin-left:-28px}

.carrousel{position:relative;display:flex;align-items:center;gap:.5rem}
.carrousel-fenetre{flex:1;overflow:hidden;padding-block:1.25rem 2.5rem}
.carrousel-piste{
  display:flex;align-items:stretch;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.avis-item{
  flex:0 0 100%;display:flex;justify-content:center;padding-inline:.5rem;
  /* les voisines s'effacent pour que l'œil aille au centre */
  opacity:.35;transform:scale(.92);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.avis-item.est-actif{opacity:1;transform:none}

.avis-carte{
  position:relative;margin:0;width:100%;max-width:540px;
  padding:2.1rem 1.9rem 1.6rem;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.avis-item.est-actif .avis-carte{
  background:linear-gradient(150deg,var(--brand-700),var(--brand-900));
  border-color:transparent;box-shadow:var(--shadow-lg);
}
/* Pointe sous la fiche active, comme dans la maquette */
.avis-item.est-actif .avis-carte::after{
  content:"";position:absolute;left:50%;bottom:-11px;margin-left:-11px;
  width:22px;height:22px;border-radius:0 0 5px 0;
  background:var(--brand-900);transform:rotate(45deg);
}
.avis-guillemet{position:absolute;top:1.3rem;left:1.4rem;width:30px;height:30px;color:var(--brand-100)}
.avis-item.est-actif .avis-guillemet{color:rgba(255,255,255,.28)}

.avis-carte blockquote{margin:0 0 1.15rem;padding-left:2.4rem}
/* Un des avis est en arabe. Tout le bloc bascule à droite : texte, étoiles et
   guillemet décoratif — sinon les étoiles resteraient orphelines à gauche.
   Une classe plutôt que :has(), pour ne dépendre d'aucun support récent. */
.avis-rtl blockquote{padding-left:0;padding-right:2.4rem;text-align:right}
.avis-rtl .avis-etoiles{justify-content:flex-end;padding-left:0;padding-right:2.4rem}
.avis-rtl .avis-guillemet{left:auto;right:1.4rem;transform:scaleX(-1)}
.avis-carte blockquote p{margin:0;color:var(--body);font-size:1.02rem;line-height:1.7}
.avis-item.est-actif .avis-carte blockquote p{color:#fff}

.avis-etoiles{display:flex;gap:.2rem;padding-left:2.4rem}
.avis-etoiles svg{width:1.05rem;height:1.05rem;color:#E0A21C}
.avis-item.est-actif .avis-etoiles svg{color:#FFD470}

.avis-carte figcaption{
  margin-top:1.35rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  font:700 .95rem/1.3 Figtree, system-ui, sans-serif;color:var(--ink);text-align:center;
}
.avis-item.est-actif .avis-carte figcaption{color:#fff;border-top-color:rgba(255,255,255,.22)}

.carrousel-nav{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  background:#fff;border:1px solid var(--line);border-radius:50%;
  color:var(--brand-700);cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.carrousel-nav:hover{background:var(--brand-50);border-color:var(--brand-300)}
.carrousel-nav svg{width:20px;height:20px}
.carrousel-nav.prev svg{transform:rotate(90deg)}
.carrousel-nav.next svg{transform:rotate(-90deg)}

.carrousel-points{
  position:absolute;left:0;right:0;bottom:.25rem;
  display:flex;justify-content:center;gap:.45rem;
}
.carrousel-points button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--brand-200);
  transition:background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.carrousel-points button[aria-selected="true"]{background:var(--brand-700);transform:scale(1.3)}

.avis-source{margin-top:1.25rem;text-align:center;font-size:.94rem}

@media (max-width:600px){
  .carrousel{gap:.15rem}
  .carrousel-nav{width:38px;height:38px}
  .avis-carte{padding:1.7rem 1.25rem 1.35rem}
  .avis-carte blockquote,.avis-etoiles{padding-left:0}
  .avis-guillemet{position:static;margin-bottom:.6rem}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.faq-head{margin-bottom:0;position:sticky;top:100px}
.faq-head .btn{margin-top:1.25rem}
.faq-list{display:grid;gap:.65rem}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item[open]{border-color:var(--brand-200);box-shadow:var(--shadow-md)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;cursor:pointer;list-style:none;
  font:600 1rem/1.45 Figtree, system-ui, sans-serif;color:var(--ink);
  min-height:44px;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--brand-50);color:var(--brand-700)}
.faq-item summary svg{color:var(--brand-500);transition:transform var(--t) var(--ease)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-body{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:.965rem;animation:fadeIn var(--t) var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{background:var(--surface);border-top:1px solid var(--line-soft)}
/* Sur contact.html le titre de page remplace l'en-tête de section : moins d'air en haut */
.page-header + .contact{padding-top:clamp(1.75rem,4vw,2.75rem)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.25rem,3vw,2rem);align-items:start}

form{background:#fff;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field-aide{margin:.4rem 0 0;font-size:.84rem;color:var(--muted)}
label{display:block;margin-bottom:.4rem;font:600 .89rem/1.4 Figtree, system-ui, sans-serif;color:var(--ink)}
.req{color:var(--cta-600)}
input,select,textarea{
  width:100%;padding:.75rem .9rem;min-height:46px;
  font:400 1rem/1.5 "Noto Sans", system-ui, sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
textarea{resize:vertical;min-height:110px}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284C7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:18px;padding-right:2.6rem;
}
input::placeholder,textarea::placeholder{color:#64748B}
input:hover,select:hover,textarea:hover{border-color:var(--brand-300)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#DC2626;background:#FEF2F2}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(220,38,38,.25)}
.error{margin:.4rem 0 0;font-size:.85rem;font-weight:500;color:#B91C1C}
.form-note{margin:.9rem 0 0;font-size:.82rem;color:var(--muted)}
.form-status{margin:.9rem 0 0;font-size:.92rem;font-weight:600;min-height:1.2em}
.form-status.ok{color:#15803D}
.form-status.bad{color:#B91C1C}
/* Ni succès ni échec : la journée est pleine, la demande part quand même et
   sera traitée le lendemain. */
.form-status.info{color:#B45309}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact-info{background:#fff;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.contact-info h2{margin-bottom:.2rem;font-size:1.3rem}
.contact-sub{margin:0 0 1.35rem;color:var(--muted);font-size:.93rem}
.info-list{display:grid;gap:1.05rem;margin-bottom:1.5rem}
.info-list li{display:flex;gap:.85rem;align-items:flex-start}
.info-list strong{display:block;font:700 .82rem/1.4 Figtree, system-ui, sans-serif;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.info-list a,.info-list span{font-size:.95rem;color:var(--muted)}

/* Horaires : deux colonnes, le jour à gauche et l'heure à droite. Les valeurs
   sont alignées entre elles plutôt que collées au jour, pour qu'on repère d'un
   coup d'œil les journées qui commencent l'après-midi. */
.hours{
  display:grid;grid-template-columns:auto 1fr;
  gap:.2rem .9rem;margin:.35rem 0 0;
  font-size:.95rem;color:var(--muted);
}
.hours dt{color:var(--ink);font-weight:600}
.hours dd{margin:0;font-variant-numeric:tabular-nums}
.hours .is-closed{color:#B45309}
.hours-note{margin:.55rem 0 0;font-size:.88rem;color:var(--muted);font-style:italic}
.info-list a{color:var(--brand-700);text-decoration:none;transition:color var(--t) var(--ease)}
.info-list a:hover{color:var(--brand-900);text-decoration:underline}
.ii{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--brand-50);color:var(--brand-600)}
.ii svg{width:19px;height:19px}
.map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft);background:var(--brand-50)}
.map iframe{display:block;width:100%;height:230px;border:0}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--brand-900);color:#BAE6FD;padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem}
.site-footer h4{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2rem;padding-bottom:2rem}
.footer-brand p{margin-top:1rem;max-width:34ch;font-size:.92rem;color:#93C5FD}
.site-footer h4{margin-bottom:.9rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em}
.site-footer ul{display:grid;gap:.55rem}
.site-footer li,.site-footer p{font-size:.92rem}
.site-footer a{color:#BAE6FD;text-decoration:none;transition:color var(--t) var(--ease)}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;
  padding-top:1.5rem;border-top:1px solid rgba(186,230,253,.18);
}
.footer-bottom p{margin:0;font-size:.86rem;color:#93C5FD}

/* ==========================================================================
   Sticky mobile contact bar
   ========================================================================== */
.mobile-bar{
  display:none;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:var(--z-mobilebar);
  gap:.6rem;padding:.6rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--r-full);box-shadow:var(--shadow-xl);
}
.mobile-bar .btn{flex:1;padding-inline:.75rem}
.mobile-bar .btn-ghost{flex:0 0 auto;background:#fff}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Opt-in: JS adds .js to <html>, so content is never hidden when JS is off. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal[data-delay="1"]{transition-delay:.09s}
.js .reveal[data-delay="2"]{transition-delay:.18s}
.js .reveal[data-delay="3"]{transition-delay:.27s}
.js .reveal.in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .header-phone span{display:none}
  .header-phone{padding:.5rem}
  .nav a{padding:.5rem .6rem;font-size:.9rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
}

@media (max-width:900px){
  .hero-grid,.about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .hero-media{order:-1}
  .hero h1{max-width:none}
  .about-media{max-width:520px}
  .faq-head{position:static}
  .cards{grid-template-columns:repeat(2,1fr)}
  .access-grid{grid-template-columns:1fr}
  .cta-actions .btn{flex:1 1 auto}

  /* Mobile navigation drawer */
  .nav-toggle{display:flex}
  .nav-wrap{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--t) var(--ease), visibility var(--t);
    visibility:hidden;overflow:hidden;
  }
  .nav-wrap.open{grid-template-rows:1fr;visibility:visible}
  .nav{flex-direction:column;gap:.15rem;min-height:0;padding:.75rem var(--gutter) 1.1rem}
  .nav a{padding:.8rem .9rem;border-radius:var(--r-sm);font-size:1rem}
  .site-header{position:sticky}
  .header-inner{position:relative}

  /* Sticky call bar, and room for it */
  .mobile-bar{display:flex}
  body{padding-bottom:5rem}

  /* The sticky bar already carries "book", so the header duplicate only steals
     the width the brand needs — without this the name wraps to two lines. */
  .header-actions .btn-sm{display:none}
}

@media (max-width:600px){
  /* Les fiches soins restent sur deux colonnes, comme la maquette de référence */
  .cards{gap:.75rem}
  .card-body{padding:1rem 1rem 1.15rem}
  .card h3{font-size:1.02rem}
  .card p{font-size:.88rem}
  .hero-actions .btn{width:100%}
  .floating-card{left:auto;right:.5rem;bottom:-1rem;padding:.7rem .9rem}
  .footer-grid{grid-template-columns:1fr;gap:1.75rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  section[id]{scroll-margin-top:76px}
}

@media (max-width:400px){
  .header-actions .btn-sm{padding:.55rem .8rem}
}

/* Deux colonnes tiennent jusqu'à 360 px ; en dessous les fiches deviennent illisibles */
@media (max-width:359px){
  .cards{grid-template-columns:1fr}
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .hero-figure:hover img,.card:hover .card-media{transform:none}
  /* Pas de soulèvement, pas de flottement, pas d'appui sur les icônes :
     le survol reste signalé par la bordure et l'ombre. */
  .card:hover{transform:none}
  .btn:hover svg{transform:none}
  .floating-card{animation:none}
  /* Le trait sous les titres est présent d'emblée, sans tracé */
  .js .section-head.reveal h2::after,
  .js .section-head.reveal.in h2::after{transform:scaleX(1)}
  /* Pas d'animation d'ouverture du tout : on entre directement sur la page */
  .js .intro{display:none !important}
}

@media print{
  .site-header,.mobile-bar,.map,.hero-media{display:none !important}
  body{color:#000;background:#fff;padding-bottom:0}
  .js .reveal{opacity:1;transform:none}
  .section{padding-block:1rem;break-inside:avoid}
}