:root{
    --paper:#fbfaf7; --sand:#f3efe7; --ink:#182430; --ink-60:#4e5a66;
    --navy:#22384a; --navy-deep:#16283a; --brass:#b9975b; --brass-soft:#efe6d3;
    --sage:#8fa99f; --line:rgba(24,36,48,.12);
    /* CADRE PHOTO — valeur unique pour TOUT le site (voir « convention photo ») */
    --ph-cadre:0 0 0 9px #fff, 0 20px 50px rgba(24,36,48,.16);
    --ph-cadre-sombre:0 0 0 9px rgba(251,250,247,.95), 0 24px 60px rgba(0,0,0,.3);
    --font-display:"Didot","Bodoni MT","Playfair Display","Cormorant Garamond",Georgia,serif;
    --font-body:"Helvetica Neue","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* height:auto est indispensable depuis que les <img> portent width et height :
     sans lui, max-width:100% réduit la largeur en laissant la hauteur figée,
     et l'image se retrouve écrasée. Les règles plus spécifiques
     (.ba-frame img, .ph img…) restent prioritaires. */
  img{max-width:100%;height:auto}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
  /* Règle typographique : paragraphes de lecture justifiés avec césure française ;
     les éléments d'interface (labels, prix, boutons, lignes courtes) restent en alignement naturel. */
  p,.faq .a{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .tarifs-note,.hero-alt,.mini-tarifs p{text-align:left;hyphens:none}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:.005em}
  .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
  .overline{font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
  .rule{width:44px;height:1px;background:var(--brass);margin:18px 0 22px}
  .btn{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:17px 34px;transition:.3s;cursor:pointer;border:1px solid transparent}
  .btn-solid{background:var(--ink);color:var(--paper)}
  .btn-solid:hover{background:var(--brass);color:var(--ink)}
  .btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
  .btn-line:hover{border-color:var(--brass);color:var(--brass)}
  .btn-light{border-color:rgba(255,255,255,.5);color:#fff}
  .btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}

  .annonce{background:var(--ink);color:#cfd8de;text-align:center;font-size:12.5px;letter-spacing:.08em;padding:9px 16px}
  .annonce b{color:var(--brass)}

  header.site{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px;
    max-width:1340px;gap:40px}   /* plus large que le contenu : à 1180 px le logo touchait le menu */
  /* MARQUE — l'icône du logo (médaillon empreinte-cœur) accompagne le nom.
     Le fichier est le SVG de la charte, décliné en bleu océan #3F6273 (la couleur
     que la charte réserve au site internet). Le nom reste en TEXTE : c'est un H
     de marque pour les moteurs, et la calligraphie du logo complet devient
     illisible sous 60 px — règle explicite de la charte. */
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:24px;color:var(--ink);letter-spacing:.02em}
  .logo-mark{width:46px;height:auto;flex:0 0 auto;transition:transform .45s cubic-bezier(.34,1.3,.5,1)}
  .logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
  .logo i{font-style:normal;color:var(--brass)}
  .logo small{display:block;font-family:var(--font-body);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-60);margin-top:2px}
  nav.menu{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  nav.menu a{position:relative;padding:6px 0;color:var(--ink-60);white-space:nowrap}  /* « Prestations ▾ » ne doit jamais se couper entre le mot et son chevron */
  nav.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);transition:.3s}
  nav.menu a:hover{color:var(--ink)} nav.menu a:hover::after{width:100%}
  /* Indicateur de page / section courante */
  nav.menu a.actif{color:var(--ink)}
  nav.menu a.actif::after{width:100%}
  /* Menu déroulant Prestations */
  nav.menu .m-item{position:relative;display:flex;align-items:center;height:78px}
  nav.menu .m-item>a .car{font-size:9px;color:var(--brass);margin-left:5px}
  nav.menu .smenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--paper);border:1px solid var(--line);box-shadow:0 22px 54px rgba(24,36,48,.16);padding:10px 0;min-width:250px;opacity:0;visibility:hidden;transition:.25s;z-index:70}
  nav.menu .m-item:hover .smenu, nav.menu .m-item:focus-within .smenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  nav.menu .smenu a{display:block;padding:12px 24px;font-size:11.5px;letter-spacing:.12em;color:var(--ink-60)}
  nav.menu .smenu a::after{display:none}
  nav.menu .smenu a:hover{color:var(--ink);background:var(--sand)}
  nav.menu .smenu a.actif{color:var(--brass)}
  .nav-tel{font-size:15px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:10px;white-space:nowrap}  /* le numéro sur 3 lignes cassait la hauteur de la barre */
  .nav-tel span{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
  /* Deux paliers avant le burger. Avec 8 entrées de menu, la barre ne tenait plus
     sur une ligne : débordement de 6 px à 1280 px et de 10 px à 1100 px.
     1340 px : le menu se resserre, la baseline du logo s'efface, le numéro reste lisible.
     1120 px : le numéro se réduit à sa pastille ✆ — elle reste cliquable.
     960 px  : passage au burger. */
  @media(max-width:1340px){
    nav.menu{gap:21px;font-size:12.5px}
    .nav{gap:24px}
    .logo small{display:none}
  }
  @media(max-width:1120px){
    nav.menu{gap:19px;font-size:12px}
    .nav{gap:16px}
    .nav-tel{font-size:0;gap:0}
    .nav-tel span{font-size:15px;width:38px;height:38px}
  }
  @media(max-width:1000px){nav.menu{display:none}}
  @media(max-width:1000px) and (min-width:701px){
    .logo small{display:block}          /* le menu a disparu : la baseline peut revenir */
    .nav-tel{font-size:15px;gap:10px}
  }

  .hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;min-height:640px;align-items:center;gap:70px;padding-top:70px;padding-bottom:90px}
  .hero h1{font-size:clamp(40px,5.2vw,66px);margin:22px 0 26px;color:var(--ink)}
  .hero h1 .it{font-style:italic;color:var(--navy)}
  .hero p.lead{font-size:18px;color:var(--ink-60);max-width:480px;margin-bottom:38px}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
  .hero-alt{font-size:13.5px;color:var(--ink-60);margin-bottom:44px}
  .hero-alt a{border-bottom:1px solid var(--brass);font-weight:600;color:var(--ink)}
  .stats{display:flex;border-top:1px solid var(--line);padding-top:26px}
  .stat{padding-right:34px;margin-right:34px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none;margin-right:0;padding-right:0}
  .stat .v{font-family:var(--font-display);font-size:27px;color:var(--ink)}
  .stat .v em{font-style:normal;color:var(--brass)}
  .stat .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin-top:2px}
  .hero-visual{position:relative;height:560px}
  .ph{position:absolute;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.05em;text-align:center;padding:16px}
  .ph .em{font-size:56px;opacity:.9}
  .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ph-a{inset:9px 12% 14% 9px;background:linear-gradient(160deg,#2c4a60,#16283a 70%);border-radius:0 140px 0 0;box-shadow:var(--ph-cadre)}
  .ph-b{right:9px;bottom:9px;width:46%;height:44%;background:linear-gradient(160deg,#c9b184,#a9865a);box-shadow:var(--ph-cadre)}
  .hero-note{position:absolute;left:0;bottom:-4%;background:var(--paper);border:1px solid var(--line);padding:18px 24px;font-size:13px;max-width:250px;line-height:1.5}
  .hero-note b{font-family:var(--font-display);font-size:16px;display:block;margin-bottom:2px}
  .hero-note .st{color:var(--brass);letter-spacing:3px}
  @media(max-width:960px){
    .hero .wrap{grid-template-columns:1fr;min-height:auto;gap:54px;padding-top:48px;padding-bottom:60px}
    .hero-visual{height:400px}
    .stats{flex-wrap:wrap;gap:18px}
    .stat{padding-right:22px;margin-right:22px}
  }

  .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;overflow:hidden;white-space:nowrap}
  .ticker-track{display:inline-block;animation:tick 44s linear infinite}
  .ticker span{margin:0 30px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)}
  .ticker span::after{content:"·";margin-left:60px;color:var(--brass)}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:104px 0}
  .sec-head{max-width:600px;margin-bottom:58px}
  .sec-head h2{font-size:clamp(30px,3.6vw,44px);color:var(--ink)}
  .sec-head p{color:var(--ink-60);margin-top:16px}
  .center{margin-left:auto;margin-right:auto;text-align:center}
  .center .rule{margin-left:auto;margin-right:auto}

  .prest{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .prest-item{padding:42px 34px 44px;background:#fff;border:1px solid var(--line);position:relative;transition:.35s;display:flex;flex-direction:column}
  .prest-item:hover{box-shadow:0 16px 44px rgba(24,36,48,.10);transform:translateY(-3px)}
  .prest-item .num{font-family:var(--font-display);font-size:15px;color:var(--brass);letter-spacing:.1em}
  .prest-item h3{font-size:25px;margin:14px 0 14px}
  .prest-item p{font-size:15px;color:var(--ink-60)}
  .prest-item .price{margin-top:auto;padding-top:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap}
  .prest-item .price b{color:var(--brass)}
  /* Précision sous le prix de la carte « à domicile ». La ligne principale
     garde la forme « À partir de X € » des deux autres cartes, pour que les
     trois prix restent comparables d'un coup d'œil ; le détail du forfait
     passe en dessous. white-space:normal est indispensable : .price est en
     nowrap, sans quoi cette phrase déborderait de la carte. */
  .prest-item .price small{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.08em;text-transform:none;font-weight:500;color:var(--ink-60);white-space:normal;line-height:1.5}
  .prest-item .lien{display:inline-block;margin-top:18px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--brass);padding-bottom:3px}
  .prest-item.hl{background:var(--navy);color:#e7edf2}
  .prest-item.hl h3{color:#fff}
  .prest-item.hl p{color:#b9c6d0}
  .prest-item.hl:hover{background:var(--navy-deep)}
  .prest-item.hl .badge-salon{position:absolute;top:-12px;left:36px;background:var(--brass);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 14px}
  @media(max-width:960px){.prest{grid-template-columns:1fr;gap:14px}}

  /* Tarifs */
  .tarifs-w{background:var(--sand)}
  .tarifs-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px}
  table.tarifs{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
  table.tarifs th{background:var(--navy);color:#fff;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-align:left;padding:15px 20px}
  table.tarifs td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px}
  table.tarifs td:last-child{text-align:right;font-weight:700;white-space:nowrap}
  table.tarifs td:last-child b{color:var(--brass);font-family:var(--font-display);font-size:18px;font-weight:500}
  table.tarifs td.p{text-align:right;font-weight:700;white-space:nowrap}
  table.tarifs td.p b{color:var(--brass);font-family:var(--font-display);font-size:17px;font-weight:500}
  .mini-tarifs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
  .mini-tarifs > div{background:#fff;border:1px solid var(--line);padding:20px 22px}
  .mini-tarifs b.t{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .mini-tarifs p{font-size:14px;color:var(--ink-60);margin-top:8px;line-height:1.95}
  .mini-tarifs p b{color:var(--ink)}
  .mini-tarifs .mrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
  .mini-tarifs .mrow:last-child{border-bottom:none;padding-bottom:0}
  .mini-tarifs .mrow > b{white-space:nowrap;color:var(--ink)}
  .mini-tarifs .mrow small{display:block;font-size:11.5px;font-style:italic;color:var(--ink-60);margin-top:1px}
  table.tarifs th:nth-child(2),table.tarifs th:nth-child(3){width:128px}
  .tarifs-side > p{text-align:justify}
  .tarifs-side .sup + p{text-align:justify}
  @media(max-width:700px){.mini-tarifs{grid-template-columns:1fr}}
  table.tarifs td small{display:block;color:var(--ink-60);font-size:12.5px;margin-top:2px}
  .tarifs-note{font-size:12.5px;color:var(--ink-60);margin-top:14px;font-style:italic}
  .tarifs-side{background:var(--navy-deep);color:#dce5ec;padding:42px 38px;display:flex;flex-direction:column}
  .tarifs-side p:last-of-type{margin-bottom:24px}
  .tarifs-side h3{color:#fff;font-size:24px;margin-bottom:14px}
  .tarifs-side h3 .it{font-style:italic;color:var(--brass)}
  .tarifs-side p{font-size:14.5px;color:#a7b6c2;margin-bottom:14px}
  .tarifs-side .sup{border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:18px;font-size:13.5px}
  .tarifs-side .sup div{display:flex;justify-content:space-between;gap:14px;padding:7px 0}
  .tarifs-side .sup b{color:var(--brass);white-space:nowrap}
  @media(max-width:960px){.tarifs-grid{grid-template-columns:1fr}}

  .saison{background:var(--navy-deep);color:#dce5ec;position:relative;overflow:hidden}
  .saison::after{content:"◦";position:absolute;right:-60px;top:-120px;font-size:420px;color:rgba(185,151,91,.12);line-height:1}
  .saison .wrap{display:grid;grid-template-columns:1.28fr .72fr;gap:56px;align-items:center}
  .saison a.btn{margin:32px auto 0;display:flex;width:max-content}
  .saison h2{font-size:clamp(28px,3.4vw,42px);color:#fff}
  .saison h2 .it{font-style:italic;color:var(--brass)}
  .saison p{color:#a7b6c2;margin-top:18px;max-width:620px}
  .saison .pt{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600}
  .saison-list{border-top:1px solid rgba(255,255,255,.14)}
  .saison-list div{padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;display:flex;gap:16px;align-items:baseline}
  .saison-list div b{color:var(--brass);font-family:var(--font-display);font-size:17px;min-width:26px}
  @media(max-width:960px){.saison .wrap{grid-template-columns:1fr}}

  .avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .avis{background:#fff;padding:40px 34px;border:1px solid var(--line)}
  .avis .st{color:var(--brass);letter-spacing:4px;font-size:15px}
  .avis p{font-family:var(--font-display);font-size:18.5px;font-style:italic;line-height:1.5;margin:18px 0 22px;color:var(--ink)}
  .avis .who{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);font-weight:600}
  .avis-foot{text-align:center;margin-top:46px}
  .avis-foot a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--brass);padding-bottom:4px}
  @media(max-width:960px){.avis-grid{grid-template-columns:1fr}}

  .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .gal-hint{font-size:13px;color:var(--ink-60);font-style:italic;margin-bottom:18px}
  /* Paire avant/après présentée côte à côte plutôt qu'au curseur (voir le
     commentaire de page-galerie.php). Largeur bornée : à pleine largeur, deux
     photos de 590 px écraseraient les trois curseurs juste au-dessus. */
  .ba-duo{max-width:760px;margin:0 auto}
  .ba-duo .ph-duo{gap:22px}
  .ba-duo figcaption b{color:var(--brass);font-weight:700}
  .ba{margin:0}
  .ba-frame{box-shadow:var(--ph-cadre)}
  .ba-frame{position:relative;aspect-ratio:.82;overflow:hidden;background:var(--navy);cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
  .ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ba-over{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
  .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 12px rgba(24,36,48,.4)}
  .ba-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--brass);display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:16px;box-shadow:0 4px 14px rgba(24,36,48,.3)}
  .ba-line span::before{content:'⇔'}
  .ba-range{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  .ba-frame:has(.ba-range:focus-visible){outline:2px solid var(--brass);outline-offset:3px}
  .ba-tag{position:absolute;top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(24,36,48,.55);padding:4px 9px;pointer-events:none}
  .ba-t-avant{left:10px}
  .ba-t-apres{right:10px}
  .ba figcaption{margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
  @media(max-width:700px){
    .gal{grid-template-columns:1fr}
    .ba-frame{aspect-ratio:.95}
    .ba-tag{font-size:9px;padding:3px 7px}
  }

  .apropos .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
  .apropos .portrait{aspect-ratio:.8;position:relative;background:var(--sand);box-shadow:var(--ph-cadre)}
  /* Portrait animé : une carte à deux faces qui pivote sur son axe vertical.
     L'animation ne tourne QUE lorsque le bloc est visible (IntersectionObserver côté JS)
     et jamais si l'utilisateur a demandé moins d'animations. */
  .apropos .portrait .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.6,.02,.2,1)}
  .apropos .portrait .flip.face-b{transform:rotateY(180deg)}
  .apropos .portrait .flip-f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
  .apropos .portrait .flip-b{transform:rotateY(180deg)}
  .apropos .portrait .flip-f img{width:100%;height:100%;object-fit:cover;display:block}
  .apropos .portrait{perspective:1400px}
  @media(prefers-reduced-motion:reduce){
    .apropos .portrait .flip{transition:none}
  }
  .apropos h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:20px}
  .apropos h2 .it{font-style:italic;color:var(--navy)}
  .apropos p{color:var(--ink-60);margin-bottom:14px}
  .dist{margin-top:30px;border-top:1px solid var(--line)}
  .dist div{display:flex;justify-content:space-between;gap:20px;padding:15px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
  .dist div span:first-child{font-weight:600}
  .dist div span:last-child{color:var(--ink-60)}
  @media(max-width:960px){.apropos .wrap{grid-template-columns:1fr;gap:46px}}

  /* FAQ */
  .faq-w{background:var(--paper)}
  .faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font-family:var(--font-display);font-size:20px;transition:.25s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--font-body);font-size:22px;color:var(--brass);transition:.3s;flex-shrink:0}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:hover{color:var(--navy)}
  .faq .a{padding:0 4px 26px;color:var(--ink-60);font-size:15.5px;max-width:700px}
  .faq .a b{color:var(--ink)}

  .zone .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  .communes{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .communes span{padding:13px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;flex-grow:1;text-align:center;transition:.25s}
  .communes span:hover{background:var(--ink);color:var(--paper)}
  .communes span.main{background:var(--brass);color:var(--ink);font-weight:700}
  .map-ph{aspect-ratio:1.05;background:linear-gradient(165deg,#22384a,#16283a);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#93a7b6;font-size:13px;position:relative}
  .map-ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.16)}
  .map-ph .em{font-size:40px}
  .map-embed{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);background:#fff}
  .map-embed iframe{width:100%;border:0;display:block;aspect-ratio:1.15;min-height:320px}
  .map-embed .btn{width:100%;justify-content:center;border-radius:0}
  @media(max-width:960px){.zone .wrap{grid-template-columns:1fr}}

  .contact{background:var(--ink);color:#c6d0d8;padding:110px 0}
  .contact .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
  .contact h2{font-size:clamp(32px,4vw,52px);color:#fff}
  .contact h2 .it{font-style:italic;color:var(--brass)}
  .contact p{margin:20px 0 34px;color:#93a2ae;max-width:480px}
  .contact .duo{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:480px}
  .contact .duo .btn{min-width:210px;justify-content:center}
  @media(max-width:700px){.contact .duo .btn{width:100%}}

  /* Burger + menu mobile */
  .burger{display:none;background:none;border:1px solid var(--line);width:42px;height:42px;cursor:pointer;font-size:18px;color:var(--ink);align-items:center;justify-content:center}
  @media(max-width:1000px){.burger{display:flex}}
  /* Marque en petit écran. Le nom ne doit JAMAIS se couper en deux lignes : il
     ferait grandir la barre et pousserait le numéro hors de l'écran (constaté à
     390 px). Il rétrécit d'abord, puis s'efface au profit de l'icône seule —
     cas explicitement prévu par la charte du logo sous 60 px de large. */
  .logo-txt{white-space:nowrap}
  @media(max-width:700px){
    .logo{gap:9px;font-size:19px}
    .logo-mark{width:36px}
    .logo small{font-size:8px;letter-spacing:.2em}
    .nav-tel{font-size:0;gap:0}                    /* on ne garde que la pastille ✆ */
    .nav-tel span{font-size:15px;width:40px;height:40px}
  }
  @media(max-width:430px){
    .logo{font-size:18px}
    .logo small{display:none}                      /* la baseline avant le nom */
  }
  @media(max-width:340px){
    .logo-txt{display:none}                        /* dernier recours : l'icône seule */
    .logo-mark{width:44px}
  }
  @media(max-width:700px){
    footer .wrap{justify-content:center;text-align:center;gap:16px}
    .footer-logo{width:126px;margin:0 auto 2px}
  }
  .menu-overlay{position:fixed;inset:0;background:var(--paper);z-index:115;display:none;flex-direction:column;padding:84px 30px 40px;overflow:auto}
  .menu-overlay.open{display:flex}
  .menu-overlay > a{font-family:var(--font-display);font-size:27px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .menu-overlay > a:hover{color:var(--brass)}
  .menu-overlay > a.sm{font-family:var(--font-body);font-size:14px;letter-spacing:.08em;padding:12px 0 12px 22px;color:var(--ink-60);border-bottom:1px solid rgba(24,36,48,.06)}
  .menu-overlay > a.actif{color:var(--brass)}
  .menu-overlay > a.actif::before{content:'— ';color:var(--brass)}
.menu-overlay > a.btn{font-family:var(--font-body);font-size:13.5px;letter-spacing:.14em;color:var(--paper);border-bottom:none;justify-content:center}
.menu-overlay > a.btn:hover{color:var(--ink)}
  .menu-overlay .close-m{position:absolute;top:18px;right:22px;font-size:28px;background:none;border:none;cursor:pointer;color:var(--ink-60)}
  .coords{border-left:1px solid rgba(255,255,255,.2);padding-left:44px;display:flex;flex-direction:column;gap:20px;font-size:15.5px}
  .coords .l{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:700;display:block;margin-bottom:4px}
  .coords a.tel{font-family:var(--font-display);font-size:30px;color:#fff}
  @media(max-width:960px){.contact .wrap{grid-template-columns:1fr;gap:50px}.coords{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:36px}}

  footer{background:var(--ink);color:#7c8b97;border-top:1px solid rgba(255,255,255,.12);padding:26px 0;font-size:12.5px}
  footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
  footer a:hover{color:var(--brass)}
  /* Logo complet en version claire : le pied de page est le seul endroit du site
     assez sombre et assez calme pour porter la signature entière. */
  .footer-logo{width:168px;height:auto;flex:0 0 auto;opacity:.9}

  .mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--ink);padding:0 0 env(safe-area-inset-bottom)}
  .mobile-bar a{flex:1;text-align:center;color:#fff;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:17px 4px}
  .mobile-bar a.call{background:var(--brass);color:var(--ink)}
  .mobile-bar a.sms{background:#2c4a60}
  @media(max-width:960px){.mobile-bar{display:flex}body{padding-bottom:52px}}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
  .reveal.on{opacity:1;transform:none}

  /* Statut ouvert/fermé */
  .statut{display:inline-flex;align-items:center;gap:7px;font-weight:700}
  .statut .dot{width:8px;height:8px;border-radius:50%;background:#5cb85c;box-shadow:0 0 6px rgba(92,184,92,.8)}
  .statut.closed .dot{background:#d9756c;box-shadow:none}

  /* Assistant de réservation */
  .rdv-overlay{position:fixed;inset:0;background:rgba(24,36,48,.6);backdrop-filter:blur(4px);z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
  .rdv-overlay.open{display:flex}
  .rdv{background:var(--paper);width:100%;max-width:460px;padding:36px 32px 30px;position:relative;max-height:90vh;overflow:auto;border-top:3px solid var(--brass)}
  .rdv .close{position:absolute;top:14px;right:18px;font-size:22px;cursor:pointer;color:var(--ink-60);background:none;border:none}
  .rdv .steps{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:10px}
  .rdv h3{font-size:24px;margin-bottom:20px}
  .rdv .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .rdv .opt{border:1px solid var(--line);background:#fff;padding:15px 14px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:left;transition:.2s}
  .rdv .opt:hover{border-color:var(--brass)}
  .rdv .opt small{display:block;font-weight:400;color:var(--ink-60);font-size:12px;margin-top:2px}
  .rdv select{width:100%;padding:14px;font:inherit;font-size:15px;border:1px solid var(--line);background:#fff;margin-top:10px}
  .rdv .back{margin-top:18px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-60);background:none;border:none;cursor:pointer}
  .rdv .back:hover{color:var(--brass)}
  .rdv .final a{display:flex;justify-content:center;margin-top:12px}
  .rdv .recap{background:#fff;border:1px solid var(--line);padding:16px 18px;font-size:14px;margin-bottom:8px;line-height:1.6}
  .rdv .note{font-size:12.5px;color:var(--ink-60);margin-top:14px;text-align:center}
  @media(max-width:560px){.rdv-overlay{padding:16px;align-items:center}.rdv{max-width:none;border-radius:14px;max-height:80vh}}

  /* ===== Finition mobile : alignements & centrage ===== */
  @media(max-width:700px){
    section{padding:64px 0}
    .sec-head{text-align:center;margin-left:auto;margin-right:auto}
    .sec-head .rule{margin-left:auto;margin-right:auto}
    .hero .wrap>div:first-child{text-align:center}
    .hero p.lead{margin-left:auto;margin-right:auto;text-align:center;hyphens:none}
    .hero-alt{text-align:center}
    .hero-ctas{justify-content:center}
    .hero-ctas .btn{width:100%;justify-content:center}
    .hero-alt{text-align:center}
    .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;text-align:center;padding-top:24px}
    .stat{border-right:none;padding:0;margin:0}
    .hero-note{left:10px;bottom:10px;max-width:210px;padding:14px 16px}
    .annonce{font-size:11.5px;line-height:1.6;padding:8px 14px}
    .annonce-x{display:none}
    .prest-item{padding:34px 24px 38px;text-align:left}
    table.tarifs th,table.tarifs td{padding:12px 10px;font-size:13.5px}
    table.tarifs td.p b{font-size:15px}
    table.tarifs td small{font-size:11px}
    .tarifs-side{padding:30px 24px}
    .mini-tarifs > div{padding:18px 20px}
    .saison-list div{font-size:14px}
    .communes span{padding:11px 12px;font-size:12.5px}
    .coords a.tel{font-size:26px}
    .faq summary{font-size:17.5px;text-align:left}
    .apropos .wrap,.zone .wrap,.contact .wrap{gap:38px}
    .gal{gap:22px}
    footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:8px}
    /* Section vacanciers : centrage harmonisé */
    .saison{text-align:center}
    .saison p{margin-left:auto;margin-right:auto}
    .saison a.btn{width:100%;justify-content:center}
    .saison-list div{text-align:left}
  }

  /* ===== Tarifs mobile : fiches par prestation au lieu du tableau 3 colonnes ===== */
  @media(max-width:600px){
    /* Système de groupe unifié : un conteneur englobant par famille (Chiens / Chats / Lapins),
       bandeau marine en tête, prestations séparées par filets — continuité visuelle garantie. */
    table.tarifs{border:1px solid var(--line);background:#fff;display:block;overflow:hidden}
    table.tarifs tbody,table.tarifs td{display:block}
    table.tarifs tr{display:flex;flex-wrap:wrap;background:transparent;border:none;border-bottom:1px solid var(--line);margin:0;padding:16px 16px 15px}
    table.tarifs tr:last-child{border-bottom:none}
    table.tarifs tr:first-child{background:var(--navy);border-bottom:none;padding:13px 16px;justify-content:center}
    table.tarifs tr:first-child th{padding:0;width:auto;background:none}
    table.tarifs tr:first-child th:first-child{color:#fff;font-size:12.5px;letter-spacing:.16em;text-align:center}
    table.tarifs tr:first-child th:nth-child(2),table.tarifs tr:first-child th:nth-child(3){display:none}
    table.tarifs td{border:none;padding:0}
    table.tarifs td:first-child{flex:0 0 100%;text-align:center;font-weight:600;font-size:15.5px;margin-bottom:14px}
    table.tarifs td:first-child small{font-size:12px;margin-top:2px;font-weight:400}
    table.tarifs td.p{flex:1;display:block;text-align:center;white-space:normal}
    table.tarifs td.p + td.p{border-left:1px solid var(--line)}
    table.tarifs td.p::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);font-weight:700;margin-bottom:4px}
    table.tarifs td.p b{font-size:17.5px}
    table.tarifs td.p[colspan]{flex:0 0 100%;border-left:none}
    /* Chats et Lapins : même grammaire de groupe que les Chiens */
    .mini-tarifs{margin-top:14px;gap:14px}
    .mini-tarifs > div{padding:0;overflow:hidden}
    .mini-tarifs b.t{display:block;background:var(--navy);color:#fff;text-align:center;padding:13px 16px;font-size:12.5px;letter-spacing:.16em}
    .mini-tarifs .mrow{margin:0 16px;padding:12px 0}
    .mini-tarifs .mrow:last-child{padding-bottom:15px}
  }

  /* ===== Accessibilité : focus clavier visible ===== */
  a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ===== Pages intérieures ===== */
/* Tableau races (page tarifs) — lignes cliquables vers l'assistant RDV */
table.tarifs.races th:nth-child(2){width:auto}
table.tarifs.races tr[data-rdv-animal]{cursor:pointer;transition:background .2s}
table.tarifs.races tr[data-rdv-animal]:hover{background:var(--sand)}
table.tarifs.races td.p::after{content:'→';color:var(--brass);margin-left:10px;font-weight:600;display:inline-block;transition:transform .2s}
table.tarifs.races tr:hover td.p::after{transform:translateX(4px)}
@media(max-width:600px){
  table.tarifs.races tr{padding:14px 16px;align-items:baseline}
  table.tarifs.races td:first-child{flex:1 1 55%;text-align:left;font-size:15px;margin-bottom:6px}
  table.tarifs.races td.p{flex:0 0 auto;margin-left:auto;text-align:right}
  table.tarifs.races td:nth-child(2){flex:0 0 100%;order:1;font-size:13px;color:var(--ink-60)}
  /* Mobile : pas de survol possible → chaque fiche affiche son action, lisible au premier regard */
  table.tarifs.races td.p::after{display:none}
  table.tarifs.races tr[data-rdv-animal]::after{content:'Réserver pour cette race  →';order:2;flex:0 0 100%;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--brass);text-align:center}
}
.page-hero{background:var(--sand);padding:84px 0 66px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(36px,4.6vw,58px);margin:20px 0 22px;color:var(--ink)}
.page-hero h1 .it{font-style:italic;color:var(--navy)}
.page-hero p.lead{font-size:17.5px;color:var(--ink-60);max-width:660px;text-align:justify;hyphens:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gcard{background:#fff;border:1px solid var(--line);padding:28px 24px}
.gcard b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;margin-bottom:10px;color:var(--ink)}
.gcard p{font-size:14.5px;color:var(--ink-60);text-align:justify;hyphens:auto}
.canaux .gcard{display:flex;flex-direction:column}
.canaux .gcard p{margin-bottom:16px}
.canaux .btn{padding:15px 10px;font-size:11.5px;letter-spacing:.1em;white-space:nowrap}
.gcard.hl{background:var(--navy);border-color:var(--navy);position:relative}
.gcard.hl b{color:#fff}
.gcard.hl p{color:#b9c6d0}
.gcard.hl .badge{position:absolute;top:-12px;left:24px;background:var(--brass);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 14px}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.etape{border-top:2px solid var(--brass);padding-top:20px}
.etape .n{font-family:var(--font-display);font-size:28px;color:var(--brass)}
.etape b{display:block;font-family:var(--font-display);font-size:18.5px;font-weight:600;margin:8px 0 8px;color:var(--ink)}
.etape p{font-size:14.5px;color:var(--ink-60)}
.duo-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.duo-photos figure{margin:0}
.duo-photos img{width:100%;aspect-ratio:.9;object-fit:cover;display:block}
.duo-photos figcaption{margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.inclus{margin-top:38px;padding:18px 22px;background:var(--sand);border-left:3px solid var(--brass);font-size:14.5px;color:var(--ink)}
.inclus div{padding:8px 0}
.inclus div + div{border-top:1px solid rgba(24,36,48,.08)}
/* Emplacement photo en attente (page Noémie — mini-shooting) : cadre volontairement assumé.
   NB : ne pas nommer .ph — la classe existe déjà pour le hero de l'accueil (position:absolute). */
.ph-wait{display:flex;align-items:center;justify-content:center;background:var(--sand);border:1px dashed var(--brass);color:var(--ink-60);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-align:center;line-height:2;padding:20px}
/* Cartes avis (toutes pages) : l'auteur est épinglé en bas de carte, aligné entre colonnes */
.avis-grid .avis{display:flex;flex-direction:column}
.avis-grid .avis .who{margin-top:auto;padding-top:14px}
/* ===== Fil des avis (page Avis) =====
   Format unique : étoiles + prénom + date, l'avis, la réponse en retrait.
   Colonne unique volontaire — un mur en colonnes de hauteurs inégales rendait
   la page brouillonne. Ici chaque entrée a la même structure, donc le même rythme. */
.revs{max-width:780px;margin:0 auto}
.rev{background:#fff;border:1px solid var(--line);padding:32px 34px 30px;margin-bottom:18px}
.rev[hidden]{display:none}
.rev > header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rev .st{color:var(--brass);letter-spacing:3px;font-size:13px}
.rev .st .off{color:var(--line)}
.rev > header b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink)}
.rev > header time{margin-left:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
.rev-t{font-size:15.5px;color:var(--ink)}
.rev-r{margin:18px 0 0 34px;padding:16px 20px;background:var(--sand);border-left:3px solid var(--brass)}
.rev-r p{font-size:14px;color:var(--ink-60);text-align:left;hyphens:none}
.rev-l{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:6px}
.revs-vide{max-width:780px;margin:0 auto;text-align:center;color:var(--ink-60);font-style:italic;padding:30px 0}
.revs-foot{text-align:center;margin-top:26px}
.revs-foot[hidden]{display:none}
.rev-neg{max-width:780px;margin:0 auto}
.rev-neg .rev-note{margin-top:18px;font-size:13.5px;color:var(--ink-60);font-style:italic}
@media(max-width:640px){
  .rev{padding:26px 22px 24px}
  .rev-r{margin-left:0}
  .rev > header time{margin-left:0;width:100%}
}
/* ===== CONVENTION PHOTO DU SITE — un seul composant : `.ph-ed` =====
   Toute photo de contenu isolée (hors galerie en grille et hors curseurs avant/après)
   se traite ainsi : tirage encadré de blanc, ombre portée, aplat de couleur décalé
   derrière, légende en petites capitales précédée d'un filet laiton.
   VARIANTES :
     .ed-sand / .ed-paper  aplat décalé (sable sur fond papier / papier sur fond sable)
     .ed-l                 décalage inversé (photo placée à gauche du texte)
     .ed-dark              sur bande marine : cadre papier, légende claire, pas d'aplat
     .ph-tilt-l / -r       très légère inclinaison, RÉSERVÉE aux photos d'archives
   ⚠️ Ne PAS restyler une photo au cas par cas en style inline : ajouter une variante ici.
   (Ce bloc a été effacé par erreur en v3.0.0 lors de la refonte de la page Avis —
    vérifier sa présence après toute réécriture de section CSS.) */
.ph-ed{position:relative;margin:0}
.ph-ed img{width:100%;object-fit:cover;display:block;box-shadow:var(--ph-cadre)}
.ph-ed.ed-sand::before,.ph-ed.ed-paper::before{content:"";position:absolute;z-index:-1;top:26px;bottom:-20px;left:26px;right:-20px}
.ph-ed.ed-sand::before{background:var(--sand)}
.ph-ed.ed-paper::before{background:var(--paper)}
.ph-ed.ed-l::before{left:-20px;right:26px}
.ph-ed figcaption{margin-top:16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
.ph-ed figcaption::before{content:"";display:inline-block;width:22px;height:1px;background:var(--brass);vertical-align:2px;margin-right:10px}
.ph-ed.ed-dark img{box-shadow:var(--ph-cadre-sombre)}
.ph-ed.ed-dark figcaption{color:#a7b6c2}
.ph-tilt-l img{transform:rotate(-1.3deg)}
.ph-tilt-r img{transform:rotate(1.1deg)}
/* Duo de photos : même traitement appliqué aux deux tirages */
.duo-photos.ph-duo figure{position:relative;margin:0}
.duo-photos.ph-duo img{width:100%;aspect-ratio:.9;object-fit:cover;display:block;box-shadow:var(--ph-cadre)}
.duo-photos.ph-duo figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
.duo-photos.ph-duo figcaption::before{content:"";display:inline-block;width:18px;height:1px;background:var(--brass);vertical-align:2px;margin-right:9px}
@media(max-width:700px){
  /* sur mobile l'aplat décalé mangerait la marge : on le neutralise */
  .ph-ed.ed-sand::before,.ph-ed.ed-paper::before{display:none}
  .ph-ed figcaption,.duo-photos.ph-duo figcaption{text-align:center}
}
/* Un <h3> à l'intérieur d'un <summary> : structure lisible par les moteurs
   (chaque question devient une unité), rendu visuel strictement inchangé. */
.faq summary h3{display:inline;font:inherit;color:inherit;letter-spacing:inherit;font-weight:inherit}
/* Le cadre étant peint en box-shadow (donc HORS de la boîte), on réserve la marge
   correspondante là où les photos touchent un bord de grille. */
.ph-ed,.duo-photos.ph-duo figure,.pgrid figure,.gal .ba{margin-bottom:2px}
/* Citation en exergue (page Noémie) */
.exergue{margin-top:28px;max-width:520px;font-family:var(--font-display);font-size:25px;font-style:italic;color:var(--navy);line-height:1.35;padding-left:22px;border-left:3px solid var(--brass)}
.exergue small{display:block;margin-top:10px;font-family:var(--font-body);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
/* Calculateur de forfait par commune (carte marine, page à domicile) */
.calc{border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:18px;margin-bottom:18px}
.calc label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:10px}
.calc select{width:100%;padding:13px 14px;font-size:15px;font-family:var(--font-body);color:var(--ink);background:#fff;border:1px solid var(--line);cursor:pointer}
.calc .calc-l{font-size:14px;color:#dce5ec;margin:14px 0}
.calc .calc-prix{font-family:var(--font-display);font-size:22px;color:var(--brass)}
.calc #calc-sms{margin-top:4px;margin-bottom:2px}
@media(max-width:700px){
  .cta-inline{text-align:center}
  .cta-inline .btn{width:100%;justify-content:center}
}
/* Mini-assistant félin/NAC : compose le SMS de pré-qualification */
.qform{background:#fff;border:1px solid var(--line);padding:28px 26px;margin-top:28px;max-width:560px}
.qform .qf-t{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:16px}
.qform .qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-60);margin-bottom:6px}
.qform select{width:100%;padding:12px 12px;font-size:14.5px;font-family:var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer}
.qform input{width:100%;padding:12px 12px;font-size:14.5px;font-family:var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--line)}
.qform input::placeholder{color:var(--ink-60);opacity:.6}
.qform .btn{width:100%;justify-content:center;margin-top:18px}
.qform .qf-note{font-size:12.5px;color:var(--ink-60);margin-top:12px;font-style:italic;text-align:left;hyphens:none}
@media(max-width:560px){.qform .qf-grid{grid-template-columns:1fr}}
.filtres{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.filtres button{border:1px solid var(--line);background:#fff;padding:9px 18px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-60);cursor:pointer;transition:.2s;font-family:var(--font-body)}
.filtres button:hover{border-color:var(--brass);color:var(--ink)}
.filtres button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.prose{max-width:820px}
.prose h2{font-size:25px;margin:36px 0 12px;color:var(--ink)}
.prose p{margin-bottom:12px;font-size:15.5px}
.prose a{border-bottom:1px solid var(--brass);font-weight:600}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.pgrid figure{margin:0}
.pgrid img{width:100%;aspect-ratio:.85;object-fit:cover;display:block;box-shadow:var(--ph-cadre)}
.pgrid figcaption{margin-top:16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
/* Pont photo → assistant RDV : toute la figure est cliquable, l'affordance est explicite */
.pgrid figure[data-rdv-animal]{cursor:pointer}
.pgrid figure[data-rdv-animal] figcaption{display:block}
.pgrid figcaption .act{display:block;margin-top:5px;color:var(--brass);white-space:nowrap}
.pgrid figcaption .cap-t::before{content:"";display:inline-block;width:18px;height:1px;background:var(--brass);vertical-align:2px;margin-right:9px}
.pgrid figure[data-rdv-animal] img{transition:opacity .25s}
.pgrid figure[data-rdv-animal]:hover img{opacity:.82}
.pgrid figure[data-rdv-animal]:hover figcaption{color:var(--ink)}
.filtres button .ct{font-weight:400;opacity:.55;margin-left:7px;letter-spacing:0}
@media(max-width:960px){.pgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr 1fr;gap:20px}}
#ccd-consent{position:fixed;left:18px;bottom:18px;z-index:110;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 50px rgba(24,36,48,.2);padding:20px 22px;max-width:340px}
#ccd-consent p{font-size:13.5px;color:var(--ink-60);margin-bottom:14px;text-align:left;hyphens:none}
#ccd-consent b{color:var(--ink)}
#ccd-consent div{display:flex;gap:10px}
#ccd-consent .btn{padding:10px 16px;font-size:11px}
@media(max-width:700px){#ccd-consent{left:12px;right:12px;bottom:76px;max-width:none}}
  /* Recherche du hub de questions. Ce champ n'avait AUCUN style : il tombait à la
     taille par défaut du navigateur, soit une vingtaine de caractères — trop petit
     pour qu'on comprenne qu'on peut y taper. Un champ de recherche doit en avoir l'air. */
  .faq-search{max-width:640px;margin-bottom:26px}
  .faq-search input{width:100%;font-family:var(--font-body);font-size:16.5px;
    padding:17px 20px 17px 50px;border:1px solid var(--line);background:var(--paper);
    color:var(--ink);transition:.25s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e5a66' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:17px center;background-size:19px}
  .faq-search input::placeholder{color:var(--ink-60);opacity:.85}
  .faq-search input:focus{outline:none;border-color:var(--brass);background-color:#fff;
    box-shadow:0 6px 26px rgba(24,36,48,.09)}
  @media(max-width:700px){
    .faq-search{margin-left:auto;margin-right:auto}
    .faq-search label{text-align:center}
    .faq-search input{font-size:16px}      /* 16 px mini : en dessous, iOS zoome au focus */
  }

.cta-fin{background:var(--navy);text-align:center}
.cta-fin h2{font-size:clamp(28px,3.4vw,40px);color:#fff}
.cta-fin p{color:#a7b6c2;margin:16px auto 32px;max-width:520px}
@media(max-width:960px){
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .page-hero{padding:56px 0 48px}
}
@media(max-width:560px){
  .grid4{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .duo-photos{grid-template-columns:1fr}
  /* EXCEPTION : la paire avant/après reste sur deux colonnes, même sur le plus
     petit écran. Empilée, elle cesse d'être une comparaison — on ne voit plus
     qu'une photo à la fois et il faut faire défiler entre les deux. Deux vignettes
     étroites vues ensemble valent mieux que deux grandes vues séparément. */
  .ba-duo .ph-duo{grid-template-columns:1fr 1fr;gap:10px}
  .ba-duo figcaption{font-size:9px;letter-spacing:.1em}
}

/* ===== Convention mobile (≤ 700 px) — À RESPECTER POUR TOUTE NOUVELLE PAGE =====
   Règle typographique du site sur écran étroit :
   · les TITRES de page et de section sont centrés (aligné à gauche, un titre court
     « flotte » dans la colonne ; centré, il structure la lecture) — filet laiton centré
     avec eux ;
   · les PARAGRAPHES restent justifiés AVEC césure (hyphens:auto) : sans césure, le
     justifié sur colonne étroite creuse des rivières de blanc ;
   · les rangées de chiffres et les chips de filtre se centrent et perdent leurs
     séparateurs verticaux, qui n'ont plus de sens une fois la rangée repliée. */
@media(max-width:700px){
  .page-hero .wrap{text-align:center}
  .page-hero .rule{margin-left:auto;margin-right:auto}
  .page-hero p.lead,.hero p.lead{text-align:justify;hyphens:auto}
  .sec-head{text-align:center}
  .sec-head .rule{margin-left:auto;margin-right:auto}
  .sec-head p{text-align:justify;hyphens:auto}
  .saison .pt,.saison h2{text-align:center;display:block}
  /* rangée de chiffres : grille 2 colonnes déterministe (4 chiffres → 2×2,
     3 chiffres → 2 puis 1 centré sur toute la largeur) plutôt qu'un flex qui
     laisse le dernier élément orphelin et désaligné */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
  .stat{text-align:center;border-right:none;padding-right:0;margin-right:0}
  .stat:last-child:nth-child(odd){grid-column:1/-1}
  .filtres{justify-content:center}
  .rev-r p{text-align:justify;hyphens:auto}
  .tarifs-note{text-align:justify;hyphens:auto}
  .gal-hint{text-align:center;hyphens:none}
  .qform .qf-note{text-align:justify;hyphens:auto}
  .hero-alt{text-align:center}
  .inclus div,.faq .a{text-align:justify;hyphens:auto}
  .prose h2,.prose h3{text-align:center}
  .avis .who,.rev > header time{letter-spacing:.14em}
}

/* Garde-fou anti-débordement : sans min-width:0, un enfant de grille refuse de passer
   sous la largeur intrinsèque de son contenu (typiquement une image de 1280 px) et
   élargit toute la page sur mobile.
   NB : img{max-width:100%} est déjà déclaré en tête de feuille, mais il est REDÉCLARÉ
   ici parce que le générateur de maquettes ne recopie que la section « Pages
   intérieures » — sans ça, l'aperçu HTML ne reflète pas le rendu réel du thème. */
img{max-width:100%}
.split > *, .grid3 > *, .grid4 > *, .duo-photos > *, .pgrid > *,
.tarifs-grid > *, .gal > *, .avis-grid > *, .prest > *, .etapes > *{min-width:0}
@media(max-width:640px){
  /* la légende cliquable de la galerie passe sur deux lignes plutôt que d'élargir la colonne */

}

  /* =====================================================================
     BLOG — single.php, home.php, archive.php, search.php, 404.php
     Les 10 articles sont composés avec Elementor : il pose son propre
     balisage à l'intérieur de .art-corps. On ne lui impose donc QUE la
     typographie (interlignage, marges, liens), jamais de mise en page —
     sinon on casserait des articles qu'on cherche justement à préserver.
     ===================================================================== */

  .art-tete{padding:56px 0 0}
  .art-tete h1{font-size:clamp(30px,4.4vw,50px);margin:14px 0 0}
  .fil{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:22px}
  .fil a{border-bottom:1px solid transparent;transition:.25s}
  .fil a:hover{border-bottom-color:var(--brass);color:var(--ink)}
  .fil span{margin:0 8px;color:var(--brass)}

  .art-image{margin:34px auto 0}
  .art-image img{width:100%;height:auto;display:block}

  /* Typographie de lecture. Sélecteurs volontairement peu spécifiques :
     ils cèdent le pas au CSS d'Elementor partout où celui-ci s'exprime. */
  .art-corps{padding-top:36px;padding-bottom:10px;font-size:17px}   /* JAMAIS le raccourci padding : .wrap fournit la gouttière latérale */
  .art-corps p{margin:0 0 20px}
  .art-corps h2{font-size:clamp(23px,3vw,31px);margin:44px 0 16px}
  .art-corps h3{font-size:clamp(19px,2.4vw,24px);margin:34px 0 12px}
  .art-corps ul,.art-corps ol{margin:0 0 22px 22px}
  .art-corps li{margin-bottom:9px}
  .art-corps img{height:auto;box-shadow:var(--ph-cadre);margin:12px 0}
  .art-corps a{border-bottom:1px solid var(--brass)}
  .art-corps a:hover{color:var(--brass)}
  .art-corps blockquote{border-left:2px solid var(--brass);padding-left:24px;margin:28px 0;
    font-family:var(--font-display);font-size:20px;font-style:italic;color:var(--ink-60)}

  /* --- Blocs de l'éditeur natif WordPress (v3.14.0) -------------------------
     Le thème retire le CSS de Gutenberg du front (wp-block-library, voir
     functions.php) : 70 Ko de styles pour un site qui n'en utilise aucun.
     Conséquence : un article écrit avec l'éditeur natif sortait correctement
     pour le texte — paragraphes, titres, listes, liens, citations étaient déjà
     couverts plus haut — mais SANS mise en forme pour les légendes d'images,
     les tableaux, les séparateurs et les sources de citation.
     Ces six règles comblent exactement ce manque, et rien de plus. Elles
     gardent la faible spécificité du reste du bloc : elles cèdent le pas au
     CSS d'Elementor sur les 10 articles de 2024. */

  .art-corps figure{margin:0 0 26px}
  .art-corps figure img{width:100%;display:block;margin:0}

  /* Légende : même traitement que les figcaption de la galerie — discrète,
     en capitales espacées, elle ne doit jamais se lire comme un paragraphe. */
  .art-corps figcaption{margin-top:22px;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-60);line-height:1.6;text-align:center}

  /* Tableau : sans ces règles, les colonnes se collent et le tableau est
     illisible. Même grammaire que les tableaux du reste du site. */
  .art-corps table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15.5px}
  .art-corps th{background:var(--navy);color:var(--paper);text-align:left;padding:11px 14px;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  .art-corps td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  .art-corps tbody tr:nth-child(even) td{background:var(--sand)}
  .art-corps figure.wp-block-table{margin-bottom:0}   /* le <table> porte déjà sa marge */

  /* Séparateur : le filet laiton du site, pas la ligne grise du navigateur. */
  .art-corps hr{border:0;width:44px;height:1px;background:var(--brass);margin:38px auto}

  /* Source d'une citation : elle doit se distinguer de la citation elle-même. */
  .art-corps blockquote cite{display:block;margin-top:12px;font-family:var(--font-body);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-style:normal;font-weight:600}

  .art-cats{padding-top:6px;padding-bottom:10px;display:flex;flex-wrap:wrap;gap:10px}
  .etiq{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    border:1px solid var(--line);padding:8px 15px;color:var(--ink-60);transition:.25s}
  .etiq:hover{border-color:var(--brass);color:var(--ink)}

  .art-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:34px;padding-bottom:8px}
  .art-nav-l{border:1px solid var(--line);padding:18px 22px;transition:.25s}
  .art-nav-l:hover{border-color:var(--brass);background:var(--sand)}
  .art-nav-l b{display:block;font-family:var(--font-display);font-size:17px;font-weight:500;margin-top:5px}
  .art-nav-r{text-align:right}

  /* Listes d'articles : réutilise .grid3 / .gcard, déjà en place sur le site. */
  .art-liste{margin-top:8px}
  .art-card{display:flex;flex-direction:column}
  .art-vign{display:block;margin:-1px -1px 18px;overflow:hidden}
  .art-vign img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .6s}
  .art-card:hover .art-vign img{transform:scale(1.04)}
  .art-titre{font-size:21px;margin:9px 0 10px;line-height:1.25}
  .art-titre a:hover{color:var(--brass)}
  .art-lire{margin-top:auto;padding-top:12px;font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  .art-lire:hover{color:var(--brass)}

  .pagi{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:46px}
  .pagi .page-numbers{border:1px solid var(--line);padding:11px 17px;font-size:13px;
    font-weight:600;color:var(--ink-60);transition:.25s}
  .pagi .page-numbers:hover{border-color:var(--brass);color:var(--ink)}
  .pagi .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  /* Convention mobile du site : titres centrés, pavés justifiés. */
  @media(max-width:700px){
    .art-tete{padding-top:38px}
    .art-tete h1,.art-tete .overline{text-align:center}
    .art-tete .rule{margin-left:auto;margin-right:auto}   /* le filet suit le titre centré */
    .fil{text-align:center}
    .art-corps{font-size:16.5px}
    .art-corps p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
    .art-corps h2,.art-corps h3{text-align:center}
    .art-corps figcaption{font-size:10px}
    .art-corps table{font-size:14px}
    .art-corps th,.art-corps td{padding:9px 10px}
    .art-nav{grid-template-columns:1fr}
    .art-nav-r{text-align:left}
    .art-cats{justify-content:center}
    .art-titre{text-align:center}
    .art-card p{text-align:justify;hyphens:auto}
    .art-card .overline,.art-lire{text-align:center}
  }

  /* Derniers articles sur l'accueil (conditionnée à la fraîcheur du blog) */
  .derniers-articles{background:var(--paper)}
  .da-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px}
  .da-tete h2{font-size:clamp(26px,3.3vw,38px);margin-top:8px}
  @media(max-width:700px){
    .da-tete{flex-direction:column;align-items:center;text-align:center;gap:20px}
  }

  /* Boutons réseaux sociaux — inc/reseaux.php */
  .rs{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .rs-b{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    width:42px;height:42px;border:1px solid;transition:.28s}
  .rs-b span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .rs-b:has(span){width:auto;padding:0 20px}
  /* Repli pour les navigateurs sans :has() — la largeur fixe couperait le libellé */
  @supports not (selector(:has(*))){ .rs-b{width:auto;min-width:42px;padding:0 12px} }
  .rs-sombre .rs-b{border-color:var(--line);color:var(--ink-60)}
  .rs-sombre .rs-b:hover{border-color:var(--brass);color:var(--ink);background:var(--sand)}
  .rs-clair .rs-b{border-color:rgba(255,255,255,.22);color:#9fb0bd}
  .rs-clair .rs-b:hover{border-color:var(--brass);color:var(--brass)}
  .rs-bloc{margin-top:30px}
  .rs-bloc p{margin-bottom:14px;text-align:left}
  @media(max-width:700px){ .rs{justify-content:center} .rs-bloc p{text-align:center} }

  /* =====================================================================
     RETOUR EN HAUT
     Sur la galerie, la page avis ou un article, on descend loin : remonter à
     la main est pénible, et la barre de navigation n'est pas collante sur
     toute la hauteur. Le bouton n'apparaît qu'une fois le premier écran
     dépassé — avant, il n'a aucune utilité et encombre.

     ⚠️ Sur mobile, il doit se poser AU-DESSUS de la barre fixe Appeler /
     Réserver / Itinéraire, sinon il la recouvre — c'est-à-dire qu'il masque
     les trois actions qui font vivre le site.
     ===================================================================== */
  .haut{position:fixed;right:26px;bottom:28px;z-index:80;
    width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .3s, transform .3s, background .25s, color .25s}
  .haut.on{opacity:1;transform:none;pointer-events:auto}
  .haut:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
  .haut:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  @media(max-width:900px){
    /* 56 px = hauteur de la barre fixe, + la zone sûre des iPhone récents */
    .haut{right:16px;bottom:calc(56px + 14px + env(safe-area-inset-bottom));
      width:42px;height:42px}
  }
  @media(prefers-reduced-motion:reduce){
    .haut{transition:opacity .2s}
    .haut.on{transform:none}
  }

  /* Progression de lecture — articles uniquement (voir single.php).
     z-index 61 : juste au-dessus de l'en-tête collant (60), mais sous les
     panneaux du menu mobile et de l'assistant, qui doivent tout recouvrir. */
  .lecture{position:fixed;top:0;left:0;right:0;height:3px;z-index:61;
    background:rgba(24,36,48,.07);pointer-events:none}
  .lecture span{display:block;height:100%;width:0;background:var(--brass);
    transform-origin:left center;transition:width .1s linear}
  @media(prefers-reduced-motion:reduce){ .lecture span{transition:none} }