/* ============================================================
   CTdigitalweb — couche responsive partagée (responsive.css)
   Chargée EN DERNIER sur toutes les pages.
   Elle ne redessine rien : elle corrige le comportement.
     1. confinement horizontal réel (iOS Safari compris)
     2. zones sûres iPhone (encoche + barre d'accueil)
     3. préfixes -webkit- manquants
     4. cibles tactiles ≥ 44 px (sans changer le visuel)
     5. lisibilité : plus de texte de contenu sous 14 px
     6. grand écran : contenu borné et centré
     7. paysage téléphone + zoom 200 % + mouvement réduit
   Servie via /assets/css/09-responsive.css
   ============================================================ */

/* ------------------------------------------------------------
   1. Confinement horizontal — traité À LA SOURCE

   On ne touche PAS à l'overflow de la racine. Un « overflow-x:clip » sur
   html absorberait le débordement dans scrollWidth : le contrôle
   « scrollWidth <= clientWidth » passerait toujours, quel que soit l'état
   réel de la page. On garde donc une mesure honnête et on corrige la cause.

   Les vraies sources de débordement ont été supprimées :
     - glissements latéraux des apparitions (translateX ±110 px) ;
     - pistes de grille « 1fr » remplacées par « minmax(0,1fr) » : une piste
       ne peut plus être forcée plus large que son conteneur par un enfant
       insécable ;
     - couches décoratives confinées chacune dans SON conteneur
       (.decor en 9.34, .hero-els inchangé).

   Le « body{overflow-x:hidden} » déjà présent dans site.css et dans les
   pages en ligne redevient un simple filet de sécurité, plus le pansement
   qui masquait le problème.
   ------------------------------------------------------------ */

/* Jamais d'image ou de média plus large que son cadre. */
img,svg,video,canvas,iframe{ max-width:100%; }
img,video{ height:auto; }

/* Les mots très longs (URL, e-mail, nom de domaine) ne poussent plus la page. */
p,li,dd,dt,figcaption,blockquote,td,th,summary,h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; }

/* ------------------------------------------------------------
   2. Zones sûres iPhone / iPad
   Le viewport est en `viewport-fit=cover` : la page occupe tout
   l'écran, y compris sous l'encoche et la barre d'accueil.
   ------------------------------------------------------------ */
:root{
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);
  --sa-t:env(safe-area-inset-top, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --gouttiere:2rem;
}
@media (max-width:560px){ :root{ --gouttiere:1.3rem; } }
@media (max-width:380px){ :root{ --gouttiere:1rem; } }

/* Gouttières horizontales : la valeur du site + l'encoche en paysage. */
.wrap{
  padding-left:calc(var(--gouttiere) + var(--sa-l));
  padding-right:calc(var(--gouttiere) + var(--sa-r));
}
/* La barre de nav flottante et le pied de page collent aux bords. */
.nav-in{
  padding-left:calc(2rem + var(--sa-l));
  padding-right:calc(2rem + var(--sa-r));
}
nav.scrolled .nav-in{
  padding-left:calc(1.6rem + var(--sa-l));
  padding-right:calc(1.1rem + var(--sa-r));
}
@media (max-width:560px){
  .nav-in{
    padding-left:calc(1.3rem + var(--sa-l));
    padding-right:calc(1.3rem + var(--sa-r));
  }
  nav.scrolled .nav-in{
    padding-left:calc(1rem + var(--sa-l));
    padding-right:calc(0.5rem + var(--sa-r));
  }
}
/* Barre de nav fixe : elle ne passe plus sous la barre d'état / l'encoche.
   Au repos la nav est transparente → un padding suffit ; une fois contractée
   en capsule flottante, on décale son ancrage. */
nav{ padding-top:var(--sa-t); }
nav.scrolled{ top:calc(14px + var(--sa-t)); padding-top:0; }
@media (max-width:560px){
  nav.scrolled{ top:calc(10px + var(--sa-t)); }
}
/* … et les sections de tête récupèrent la hauteur mangée par l'encoche.
   `border-top` transparent : il ajoute la place SANS écraser le padding
   existant, et le fond de la section peint dessous (pas de bande blanche). */
.herowrap,.subhero,.zi-hero,.atelier,.ap-hero,.cs-hero,.svc-hero{
  border-top:var(--sa-t) solid transparent;
}

/* Le panneau de menu déroulant ne passe pas sous l'encoche en paysage. */
@media (max-width:900px){
  .nav-mid{
    left:var(--sa-l);
    right:var(--sa-r);
  }
  .nav-mid a{
    padding-left:calc(1.6rem + var(--sa-l));
    padding-right:calc(1.6rem + var(--sa-r));
  }
}
/* Pied de page sombre : la barre d'accueil iOS ne mange plus la dernière ligne. */
footer{ padding-bottom:calc(2rem + var(--sa-b)); }

/* Tout panneau plein écran (feuille de devis, superpositions). */
.feuille-wrap,
.atelier{
  padding-left:calc(var(--sa-l) + 1.3rem);
  padding-right:calc(var(--sa-r) + 1.3rem);
}

/* ------------------------------------------------------------
   3. Préfixes WebKit manquants (Safari macOS + iOS)
   ------------------------------------------------------------ */
.map-badge{ -webkit-backdrop-filter:blur(4px); }
nav{ -webkit-backdrop-filter:none; }
nav.scrolled{ -webkit-backdrop-filter:blur(20px) saturate(150%); }

/* ------------------------------------------------------------
   4. Cibles tactiles : 44 × 44 px minimum sur appareil tactile.
   On agrandit la ZONE DE CLIC, jamais le visuel : le pseudo-élément
   est transparent et posé par-dessus, centré sur l'élément.
   ------------------------------------------------------------ */
/* 4a. Zone de clic étendue — TOUTES largeurs, ZÉRO changement visuel.
   Le pseudo-élément est transparent, centré sur le lien, et n'est posé que
   sur des liens isolés (entourés de blanc) : aucun recouvrement de voisin. */
.btn-line,.about-more,.nav-logo,.nav-mid a,.s-more a,.lang a,.rz-on{
  position:relative;
}
/* .zi-spot est DÉJÀ en position:absolute (ville.css) : on ne touche pas à
   `position`, on lui ajoute seulement une zone de clic de 44 px. */
.btn-line::before,.about-more::before,.nav-logo::before,.nav-mid a::before,.s-more a::before,.lang a::before,.rz-on::before,.zi-spot::before,.cs-back::before,.nav-home::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:max(100%, 44px);
  height:max(100%, 44px);
  z-index:0;          /* transparent : ne masque rien, ne peint rien */
  pointer-events:auto;
}
.cs-back,.nav-home{ position:relative; }
/* la pastille de ville reste 14×14 à l'œil, 44×44 au doigt */
.zi-spot::before{ width:44px; height:44px; }

/* 4b. Hauteur RÉELLE de 44 px — contextes tactiles et tablettes.
   Ces règles décalent légèrement la mise en page : on les réserve aux
   écrans où le doigt est le pointeur. */
@media (max-width:1024px),(hover:none),(pointer:coarse){
  /* listes de liens serrées : hauteur réelle, pas de zone superposée qui
     empiéterait sur le lien voisin */
  .foot-col a{ display:flex; align-items:center; min-height:44px; }
  .foot-soc a{ width:44px; height:44px; }
  .foot-bot a{ display:inline-flex; align-items:center; min-height:44px; }
  .cinfo-list li{ min-height:44px; }
  .cinfo-list li > a{ display:flex; align-items:center; min-height:44px; flex:1 1 auto; }
  .related a{ display:inline-flex; align-items:center; min-height:44px; }
  /* boutons et champs */
  .btn,.btn-gold,.btn-outline,button,[role="button"],select{ min-height:44px; }
  .nav-toggle{ width:48px; height:48px; }
  /* le résumé d'un accordéon est une cible : on garde le dessin, on assure la hauteur */
  .qa .q{ min-height:44px; }
}

/* ------------------------------------------------------------
   5. Lisibilité — aucun texte de contenu sous 14 px
   (les libellés décoratifs en majuscules espacées gardent leur taille)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   4 bis. Barre de nav mobile : logo + bouton devis + burger
   tenaient sans respiration sur 320 px (bouton collé au burger).
   ------------------------------------------------------------ */
@media (max-width:560px){
  nav .nav-right .btn-gold{ padding:0.58rem 0.9rem; font-size:0.82rem; }
  nav .nav-toggle{ margin-left:0.5rem; }
}
@media (max-width:380px){
  nav .nav-right .btn-gold{ padding:0.5rem 0.75rem; font-size:0.78rem; }
  nav .nav-toggle{ margin-left:0.35rem; }
}

/* Le hero se terminait sous la pastille « </> » de jonction (48 px, posée
   24 px au-dessus de la section suivante) : on rend la respiration. */
@media (max-width:900px){
  .herowrap .hero{ padding-bottom:2.6rem; }
}

/* Logo du pied de page : hauteur bornée SANS écrasement du rapport d'image
   (`height:92px` + `max-width:100%` déformait le logo dès que la colonne
   descendait sous ~307 px de large). */
.foot-brand img{ height:auto; width:auto; max-height:92px; max-width:100%; }

@media (max-width:1024px){
  .post-meta{ font-size:0.9rem; }
  .foot-brand p,
  .foot-col a,
  .foot-bot,
  .foot-region{ font-size:0.9rem; }
  .map-badge{ font-size:0.82rem; }
  .mk-city .mk-clab{ font-size:12px; }
  /* accueil : mentions de réassurance et détails de projet */
  .reassure,
  .psec{ font-size:0.9rem; }
  .pcite{ font-size:0.875rem; }
  .zi-pill{ font-size:0.82rem; }
  /* chrome de maquette (fausse barre d'URL, badge « en ligne », aperçu de code) :
     décoratif — on remonte au minimum lisible sans casser l'illusion d'échelle */
  .pbar .purl,.plive,.pv3-url{ font-size:0.78rem; }
}
@media (max-width:560px){
  .foot-col h4{ font-size:0.88rem; }
}

/* ------------------------------------------------------------
   6. Grand écran : le contenu reste borné et centré.
   ------------------------------------------------------------ */
@media (min-width:1600px){
  :root{ --wrap:1320px; --gouttiere:2.5rem; }
  .wrap{ max-width:1320px; }
}
@media (min-width:2200px){
  :root{ --wrap:1440px; }
  .wrap{ max-width:1440px; }
  html{ font-size:17.5px; }
}
/* Une ligne de texte ne dépasse jamais une longueur lisible. */
.lead,.s-head p{ max-width:68ch; }

/* ------------------------------------------------------------
   7. Paysage téléphone : les hauteurs en vh ne bloquent plus rien.
   ------------------------------------------------------------ */
@media (max-height:520px) and (orientation:landscape){
  .hero,.subhero{ min-height:auto; }
  .nav-mid.open{ max-height:calc(100dvh - 90px); overflow-y:auto; }
  .section{ padding:2.6rem 0; }
}

/* ------------------------------------------------------------
   8. Mouvement réduit — filet de sécurité global.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------
   9. Correctifs ciblés issus de l'audit page par page.
   ------------------------------------------------------------ */

/* 9.1 Pages services : le logo « sombre » pleine largeur restait affiché sous
   560 px EN PLUS de la marque compacte, et les liens du menu déroulant
   restaient blancs sur le panneau blanc tant que la nav n'était pas contractée
   — menu invisible au doigt. */
@media (max-width:560px){
  nav .lg-dark,
  nav:not(.scrolled) .lg-dark{ display:none; }
  nav .nav-logo .lg-mark{ display:block; }
}
@media (max-width:900px){
  nav:not(.scrolled) .nav-mid a,
  nav .nav-mid a{ color:var(--ink); }
}

/* 9.2 Barre d'étapes collée en bas (page devis) : au-dessus de la barre
   d'accueil iOS, pas dessous. */
.flux-nav{ padding-bottom:calc(0.9rem + var(--sa-b)); }

/* 9.3 Grilles qui ne repliaient jamais jusqu'à une seule colonne. */
@media (max-width:560px){
  .cs-meta{ grid-template-columns:minmax(0,1fr); }
  .cards.two{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .optgrid{ grid-template-columns:minmax(0,1fr); }
}

/* 9.4 Hauteurs en vh restantes : repli petit-viewport pour iOS. */
.zi-hero{ min-height:min(76vh,720px); min-height:min(76svh,720px); }
.prc-pin-wrap{ height:340vh; height:340svh; }

/* 9.5 Étiquettes de la carte des villes : c'est du texte de lien, pas un
   ornement — plus jamais sous 12 px, et lisible au doigt. */
.zi-pill{ font-size:0.78rem; }
@media (max-width:900px){ .zi-pill{ font-size:0.8rem; } }
@media (max-width:560px){
  .zi-pill{ font-size:0.78rem; padding:0.2rem 0.45rem; }
  .zi-spot.on .zi-pill{ font-size:0.8rem; }
}

/* 9.6 Crédit photo des pages villes : mention légale d'attribution, donc du
   contenu. 9,9 px → 12 px minimum, et le lien devient tapable. */
.ville-credit,
/* (règle déplacée en 9.23, sans la contrainte figure) */

/* 9.7 Puces et libellés en `white-space:nowrap` sur du vrai texte : ils
   pouvaient dépasser à 320 px. Le retour à la ligne est autorisé sur petit
   écran, la pastille garde son dessin. */
@media (max-width:560px){
  .lab,.champ label,.pf-badge,.fm-url,.zi-map-badge{ white-space:normal; }
}

/* 9.8 Focus clavier : le site n'avait AUCUN style :focus-visible.
   Même repère visuel que le survol, plus un anneau net. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold, #C8922A);
  outline-offset:3px;
  border-radius:4px;
}
.nav-mid a:focus-visible::after{ width:100%; }

/* 9.9 Titres de la méthode (accueil) : la taille desktop était déclarée APRÈS
   les réductions responsives, donc jamais réduite sur mobile. */
@media (max-width:900px){ .method h2{ font-size:2rem; } }
@media (max-width:560px){ .method h2{ font-size:1.72rem; } }

/* 9.10 Colonne fixe de 330px du bloc « à propos » : elle ne pouvait pas
   rétrécir entre 981 et 1180 px. */
/* Borne haute ET basse : sans le min-width, cette regle ecrasait le repli en
   UNE colonne de l accueil sous 1024 px, et la colonne de texte tombait a 0 px
   de large (titre rendu une lettre par ligne). */
@media (min-width:1025px) and (max-width:1240px){
  .about-grid{ grid-template-columns:minmax(0,330px) minmax(0,1fr); }
}

/* 9.11 Le bloc info du contact s'alignait sur 100vw (barre de défilement
   comprise) alors que .wrap s'aligne sur la largeur de contenu : décalage de
   7-8 px sur Safari macOS. */
.cinfo{ padding-left:max(2rem, calc((100% - 1180px)/2 + 2rem)); }

/* 9.12 Accueil — « satellites » flottants autour de la maquette 3D de la
   méthode. Ils débordent volontairement du cadre (left:-56px, right:-64px) :
   sur mobile ils sortent de l'écran et sont rognés au milieu d'un mot, et
   leur texte descend jusqu'à 10,2 px. Le message qu'ils portent est déjà
   écrit en clair juste au-dessus, dans la liste des étapes. */
@media (max-width:900px){
  .pv3-sat{ display:none !important; }
}

/* 9.13 Ligne de réassurance du hero : texte de contenu, 13,6 px partout. */
.reassure{ font-size:0.9rem; }

/* 9.14 Accueil — bloc de comparaison et note du CTA : du contenu, pas des
   libellés. 11,8 / 12,5 / 13,4 px → 14 px minimum. */
.cc span{ font-size:0.875rem; }
.cc.new .tag{ font-size:0.875rem; }
.pv3-cta .note,.note{ font-size:0.9rem; }

/* 9.15 Liens d'action isolés restés sous 44 px : lien « Voir l'application »
   des cartes réalisations, légende de photo de la page à propos, lien de
   retour des études de cas. */
a.cl{ position:relative; }
a.cl::before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:max(100%,44px); height:max(100%,44px); z-index:0;
}
.pf-tag{ font-size:0.875rem; }

/* 9.16 Accueil — faits « à propos » et ligne de confiance du contact. */
.about-facts span,.ctrust-line{ font-size:0.9rem; }

/* 9.17 Pastilles de catégorie (études de cas, réalisations) : libellés lus
   comme du contenu, et cible tactile pour celles qui sont des liens. */
.chips span{ font-size:0.875rem; }
@media (max-width:1024px),(hover:none),(pointer:coarse){
  .chips a{ display:inline-flex; align-items:center; min-height:44px; }
  /* liens en plein texte : on étend la zone tactile par le padding, qui
     n'affecte pas la hauteur de ligne d'un élément inline. Réservé aux liens
     de prose (sans classe) pour ne pas déformer les boutons. */
  p a:not([class]),li a:not([class]),dd a:not([class]),.qa .a a:not([class]){ padding-block:0.8rem; }
}

/* 9.18 Carte des zones (hub développeur-web) : distances et libellé d'action. */
.zi-km{ font-size:0.875rem; }
.go{ font-size:0.9rem; }

/* 9.19 Pied de page — mentions légales, copyright et région : c'est du
   contenu réglementaire, jamais sous 14 px, à toutes les largeurs. */
.foot-bot,.foot-region,.foot-brand p{ font-size:0.875rem; }
.foot-bot a,.foot-col a{ font-size:0.875rem; }

/* 9.20 Pages services : liste de preuves du hero et libellé d'étape. */
.sv-proof li{ font-size:0.9rem; }
.sv-step .t{ font-size:0.875rem; }

/* 9.21 Carte Leaflet — on ne touche pas à la bibliothèque, on l'habille.
   Boutons de zoom à 44 px au doigt, attribution lisible. */
@media (max-width:1024px),(hover:none),(pointer:coarse){
  .leaflet-touch .leaflet-bar a,
  .leaflet-control-zoom a{
    width:44px !important; height:44px !important; line-height:44px !important;
  }
}
.leaflet-container .leaflet-control-attribution{ font-size:12px; }
.leaflet-container .leaflet-control-attribution a{ display:inline-block; padding:0.25rem 0; }

/* 9.22 Pastilles de quartiers desservis (pages villes) : c'est du contenu. */
.zones span{ font-size:0.9rem; }
@media (max-width:1024px),(hover:none),(pointer:coarse){
  .zones a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* 9.23 Crédit photo des pages villes (mention de licence = contenu). */
span[style*="0.62rem"],
span[style*="0.62rem"] a{ font-size:0.875rem !important; line-height:1.3 !important; }
span[style*="0.62rem"] a{ display:inline-block; padding:0.85rem 0.15rem; }

/* 9.24 Derniers textes de contenu sous 14 px, toutes largeurs. */
.intro-meta{ font-size:0.9rem; }
.foot-col h4{ font-size:0.9rem; }
dl dt{ font-size:0.9rem; }
.post-meta,.post-meta .rt{ font-size:0.9rem; }

/* 9.25 Logo du pied de page : la marge négative d'alignement optique
   (-22/-25 px) le faisait sortir de la gouttière sous 1024 px. */
@media (max-width:1024px){
  .foot-brand img{ margin-left:0; }
}

/* ------------------------------------------------------------
   10. Menu mobile ouvert : le corps ne défile plus derrière le
   panneau, et le panneau défile seul si la liste est longue
   (paysage téléphone). Piloté par /files/menu.js.
   ------------------------------------------------------------ */
html.menu-ouvert{ overflow:hidden; }
html.menu-ouvert body{ overflow:hidden; }
.nav-mid{ overscroll-behavior:contain; }

/* 9.26 Deux cibles à 1-2 px du seuil, à toutes les largeurs : le bouton
   principal (43 px) et les boutons sociaux du pied de page (42 px).
   Le gain visuel est imperceptible, le seuil des 44 px est tenu partout. */
.btn,.btn-gold,.btn-outline{ min-height:44px; }
.foot-soc a{ width:44px; height:44px; }

/* 9.27 Derniers textes de contenu sous 14 px (spécificité alignée). */
.zi-c .go{ font-size:0.9rem; }
.cperson span{ font-size:0.9rem; }
.ap-life .tag{ font-size:0.875rem; }
.proj-sector{ font-size:0.875rem; }
.ac-priv{ font-size:0.875rem; }

/* 9.28 Listes de liens « pages liées » et contacts : hauteur de 44 px à
   TOUTES les largeurs. Le bloc respire un peu plus sur grand écran, mais la
   cible est tenue partout — et ce sont les liens de conversion. */
.related a{ display:inline-flex; align-items:center; min-height:44px; }
.cinfo-list li{ min-height:44px; }
.cinfo-list li > a{ display:flex; align-items:center; min-height:44px; flex:1 1 auto; }
.foot-col a{ display:flex; align-items:center; min-height:44px; }
.foot-bot a{ display:inline-flex; align-items:center; min-height:44px; }

/* 9.29 Bloc « qui vous répond » (à propos / contact) : nom + fonction. */
.who span{ font-size:0.9rem; }

/* 9.30 Trois derniers libellés de contenu (spécificité alignée). */
.cta-band .who span{ font-size:0.9rem; }
.nx-soon{ font-size:0.875rem; }
.zi-pin{ font-size:0.9rem; }

/* 9.31 Cible de 44 px tenue AUSSI sur grand écran, pour les deux dernières
   familles : pastilles-liens des études de cas, et liens en plein texte.
   Le padding d'un élément inline n'affecte pas la hauteur de ligne : le
   rendu est identique, seule la zone cliquable grandit. */
.chips a{ display:inline-flex; align-items:center; min-height:44px; }
p a:not([class]),li a:not([class]),dd a:not([class]),.qa .a a:not([class]){ padding-block:0.8rem; }

/* 9.32 Pages blog et légales : légende de figure, termes de définition,
   lien « pour aller plus loin ». */
.post-figcap{ font-size:0.9rem; }
.lgx-faits dt{ font-size:0.9rem; }
.post-more a{ display:inline-flex; align-items:center; min-height:44px; }

/* 9.33 Dernier libellé : « votre projet ici ? » (grille réalisations). */
.nx-tag{ font-size:0.9rem; }

/* 9.34 Page devis — le décor flottant (.d-el) déborde volontairement des
   bords (left:-64px / right:-26px). On le confine explicitement à son
   conteneur plein cadre au lieu de compter sur le rognage de la racine :
   même rendu, mais plus aucun débordement mesurable, y compris sur iOS. */
.decor{ overflow:clip; }
@supports not (overflow:clip){ .decor{ overflow:hidden; } }

/* 9.35 Accueil — le sur-titre du hero est un flex [drapeaux][texte]. Quand
   le texte passe sur deux lignes (mobile), les drapeaux restaient orphelins
   collés au bord gauche alors que tout le hero est centré. */
/* Le flex ne pouvait pas centrer : l'element texte anonyme absorbe tout
   l'espace libre. On repasse le sur-titre en flux inline sous 900 px, les
   drapeaux redeviennent une puce inline centree avec le texte. */
@media (max-width:900px){
  .hero--ct2 .kicker{ display:block; text-align:center; }
  .hero--ct2 .kicker .kf{ display:inline-flex; vertical-align:-2px; margin-right:0.4rem; }
}

/* 9.36 Page devis — la nav n'a qu'une seule variante de logo (pas de marque
   compacte comme ailleurs) : 52 px de haut = 194 px de large sur un écran de
   375 px. On l'aligne sur la hauteur des autres pages en mobile. */
@media (max-width:560px){
  nav .nav-logo > img:only-child{ height:38px; }
  nav.scrolled .nav-logo > img:only-child{ height:34px; }
}

/* ------------------------------------------------------------
   11. Finitions tactiles iOS/Android
   ------------------------------------------------------------ */
a,button,summary,[role="button"],label{
  -webkit-tap-highlight-color:rgba(200,146,42,0.18);
  touch-action:manipulation;   /* supprime le délai de 300 ms au tap */
}
/* Le survol ne « colle » pas après un tap sur les cartes qui se soulèvent :
   on ne joue l'effet que là où un vrai pointeur existe. */
@media (hover:none){
  .card:hover,.scard:hover,.pcard:hover,.rz-card:hover,.apw:hover,.sv-step:hover,.zi-c:hover,.foot-soc a:hover,.btn:hover,.btn-gold:hover,.btn-outline:hover{
    transform:none;
  }
}

/* ------------------------------------------------------------
   12. Semis décoratifs en pseudo-éléments — LA cause du débordement
   résiduel mesuré sur /a-propos/, /developpeur-web/, /blog/ et les
   études de cas (+4 à +15 px selon la largeur).
   Ces patchs (grille de points masquée) sont posés en négatif hors du
   cadre de leur parent : ils n'apparaissent dans aucun querySelectorAll
   mais comptent bien dans scrollWidth. Sur grand écran ils débordent
   dans la gouttière, ce qui est voulu ; sous 1024 px il n'y a plus de
   gouttière, donc on les ramène au bord intérieur. Le semis est flou et
   masqué : le décalage est invisible.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .cl-duo::before,
  .bw-duo::before,
  .zi-fx::before,
  .ap-life::before,
  .cs-side::before{ right:0; }
  .cs-quote::before{ left:0; }
}

/* ------------------------------------------------------------
   13. Zoom texte seul à 200 % (police racine forcée à 32 px, ou
   réglage « taille de police » du navigateur/OS).
   Le zoom de page classique (Ctrl +) équivaut à un viewport plus
   étroit, déjà couvert. Le zoom TEXTE, lui, garde la largeur : il
   faut que les longs mots cassent et que la nav cède du terrain.
   ------------------------------------------------------------ */
a{ overflow-wrap:break-word; }
/* un lien passé en inline-flex ne casse plus son texte : on l'autorise
   explicitement à rétrécir */
.foot-bot a,.foot-col a,.related a,.chips a,.cinfo-list li > a{ min-width:0; }
/* barre de nav : le bouton « devis » cède avant le burger */
.nav-right{ min-width:0; }
.nav-right .btn-gold{ min-width:0; }
.nav-toggle{ flex:0 0 auto; }
/* adresses e-mail et URL en clair : cassure autorisée partout */
a[href^="mailto:"],a[href^="tel:"],dd a,.cinfo-list a{ overflow-wrap:anywhere; }

/* 13 bis. Pastilles et badges en `white-space:nowrap` : ils ne pouvaient pas
   se replier, donc ils poussaient la page dès que la police grossissait
   (zoom texte, réglage système, ou traduction plus longue en anglais). */
@media (max-width:1024px){
  .ap-life .tag,
  .lab,
  .pf-badge,
  .fm-url,
  .zi-map-badge,
  .zi-stamp,
  .champ label{
    white-space:normal;
    max-width:100%;
    min-width:0;
  }
  .ap-life .tag > *,
  .lab > *,
  .pf-badge > *{ min-width:0; }
}

/* 13 ter. Illustration « document de devis » (pages services) : c'est le
   dessin d'une feuille, ses lignes se rognent au bord de la feuille. */
.quote-doc{ overflow:clip; }
@supports not (overflow:clip){ .quote-doc{ overflow:hidden; } }

/* ------------------------------------------------------------
   14. Deux détails révélés par la carte de contact
   ------------------------------------------------------------ */
/* La nav de l'accueil est en content-box (le border-box global du site ne
   couvre que .front, .real, .method, .about, .faq, .contact et footer) :
   `width:100%` + `border:1px solid transparent` faisait 2 px de trop. */
nav{ box-sizing:border-box; }

/* Le reset « img,svg{max-width:100%} » ne doit jamais atteindre l'intérieur
   d'une carte Leaflet : ses tuiles et son calque SVG sont dimensionnés en
   dur par la bibliothèque. Conflit classique reset CSS / Leaflet. */
.leaflet-container img,
.leaflet-container svg,
.leaflet-container canvas{ max-width:none; max-height:none; }

/* Rideau d'intro de l'accueil : le logo plonge en grossissant ×125, donc son
   SVG sort largement du cadre pendant ~400 ms. En `position:fixed` il ne crée
   aucun défilement de document, mais on le confine pour que rien ne dépasse
   à l'écran ni dans une mesure. */
.ct2i{ overflow:clip; }
@supports not (overflow:clip){ .ct2i{ overflow:hidden; } }

/* ============================================================
   15. Ajustements mobile demandés (2026-09-03)
   ============================================================ */

/* 15.1 Hero — il collait au header en haut et à la section suivante en bas,
   et le titre était petit. On respire, et le H1 grandit. */
@media (max-width:900px){
  .herowrap .hero{
    padding-top:calc(75px + 2.6rem);
    padding-bottom:3.6rem;
  }
  .hero--ct2 h1{ font-size:2.2rem; margin-top:1.6rem; }
  .hero--ct2 .hero-cta{ margin-top:2.4rem; }
  .hero--ct2 .reassure{ margin-top:1.8rem; }
}
@media (max-width:560px){
  .herowrap .hero{
    padding-top:calc(64px + 2.6rem);
    padding-bottom:3.6rem;
  }
  .hero--ct2 h1{ font-size:2.3rem; }
}
/* Pas de palier 380 ici : 375 px (iPhone SE2/8/X, la largeur la plus
   repandue) tombe dedans et perdrait la respiration voulue. */

/* 15.2 Section « Cinq étapes » — au doigt, il fallait taper chaque étape pour
   lire son texte, et l'aperçu 3D ne servait qu'au survol. Sur mobile : les 5
   étapes sont ouvertes d'emblée, chacune avec son image, aucune interaction
   requise, et l'aperçu (inutile sans survol) disparaît.
   Les sélecteurs doublent `.on` pour battre les règles de l'état actif. */
@media (max-width:900px){
  .pv3-hint{ display:none; }
  .pv3-scene{ display:none; }
  .pv3-acc{ max-width:none; gap:0.85rem; }
  .pv3-item .pv3-body,
  .pv3-item.on .pv3-body{ grid-template-rows:1fr; }
  .pv3-item,
  .pv3-item.on{
    border-color:rgba(255,255,255,0.14);
    box-shadow:0 14px 30px -18px rgba(0,0,0,0.6);
    cursor:default;
  }
  .pv3-item b,
  .pv3-item.on b{ color:#fff; }
  .pv3-item .pv3-bar,
  .pv3-item.on .pv3-bar{ background:#ECB845; }
  .pv3-item .pv3-chev,
  .pv3-item.on .pv3-chev{ display:none; }
  .pv3-item .pv3-head{ padding:1.05rem 1.15rem 0.45rem; }
  .pv3-item .pv3-body p{ padding:0 1.2rem 1.15rem 2.5rem; max-width:none; }
}

/* 15.3 Pied de page entièrement centré sur mobile. */
@media (max-width:560px){
  footer .foot-top,
  footer .foot-brand,
  footer .foot-col{ text-align:center; }
  footer .foot-brand img{ display:block; margin-left:auto; margin-right:auto; }
  footer .foot-brand p{ max-width:32ch; margin-left:auto; margin-right:auto; }
  footer .foot-soc{ justify-content:center; }
  footer .foot-region{ justify-content:center; }
  footer .foot-col a{ justify-content:center; }
  footer .foot-col.contact a{ justify-content:center; }
  /* le décalage au survol déplacerait un texte centré */
  footer .foot-col a:hover{ padding-left:0; }
  footer .foot-bot,
  footer .foot-bot .fb-l,
  footer .foot-bot .fb-c,
  footer .foot-bot .fb-r{ text-align:center; justify-self:center; }
}

/* 15.4 Lien de retour des etudes de cas : 13,1 px -> 14 px. */
.cs-back{ font-size:0.875rem; }

/* ============================================================
   16. Mobile : hero plein écran + tout centré
   ============================================================ */

/* 16.1 À l'arrivée, on ne voit QUE le hero. La section suivante commence
   28 px sous le pli : elle apparaît au premier scroll, jamais avant.
   (28 px = la pastille « </> » de jonction, posée 24 px au-dessus de la
   section services, doit rester hors champ.)
   `box-sizing` explicite : sur l'accueil le border-box global ne couvre pas
   le hero, sinon les paddings s'ajouteraient aux 100svh. */
@media (max-width:900px){
  .herowrap .hero{
    box-sizing:border-box;
    min-height:calc(100vh + 28px);
    min-height:calc(100svh + 28px);
    align-items:center;
    align-content:center;
    justify-items:center;
    padding-top:calc(75px + 1.6rem);
    padding-bottom:calc(1.6rem + 28px);
  }
}
@media (max-width:560px){
  .herowrap .hero{
    padding-top:calc(64px + 1.6rem);
    padding-bottom:calc(1.6rem + 28px);
  }
}
/* Téléphone en paysage : un hero de 100svh n'a plus la place, on le laisse
   se dimensionner sur son contenu. */
@media (max-height:560px) and (orientation:landscape){
  .herowrap .hero{ min-height:auto; padding-bottom:2.4rem; }
}

/* 16.2 Tout est centré sur mobile, comme le pied de page.
   Exception assumée : les réponses de la FAQ et le corps des articles
   restent alignés à gauche — du texte long centré se lit mal. */
@media (max-width:560px){
  .front .wrap,
  .about .txt,
  .faq .f-head,
  .cinfo{ text-align:center; }

  .cinfo .eyebrow,.ctrust-line,.cinfo-list li,.cperson,.about .txt .eyebrow{ justify-content:center; }

  .cinfo .clede,
  .about .txt p{ margin-left:auto; margin-right:auto; }

  /* Boutons empilés : le jaune au-dessus, le blanc en dessous, pleine largeur. */
  .cctas{ flex-direction:column; align-items:stretch; }
  .cctas .btn,
  .cctas .btn-outline{ width:100%; flex:0 0 auto; justify-content:center; }
}

/* 16.3 Rangées « icône + texte » : en flex, `justify-content:center` ne fait
   rien car l'élément texte absorbe tout l'espace libre. On repasse la rangée
   en flux inline, l'icône redevient une puce — comme pour le sur-titre. */
@media (max-width:560px){
  .cinfo-list li,.ctrust-line{
    display:block;
    text-align:center;
  }
  .cinfo-list li > svg,.ctrust-line > svg{
    display:inline-block;
    vertical-align:-4px;
    margin-right:0.5rem;
  }
  .cinfo-list li > a{
    display:inline-flex;
    flex:0 1 auto;
    text-align:left;
  }
  /* portrait + phrase : empilés et centrés plutôt que côte à côte */
  .cperson{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0.7rem;
  }
}

/* 16.4 Le filet clair entre les colonnes et la ligne de copyright
   (`.foot-top{border-bottom:rgba(255,255,255,.09)}`) : retiré sur mobile,
   où le pied de page est déjà une seule colonne centrée. */
@media (max-width:560px){
  footer .foot-top{ border-bottom:0; }
}

/* 16.5 Bouton « Reprendre où vous en étiez » (devis) : en display inline,
   `min-height` n'avait aucun effet. */
.lien-passer{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }

/* ============================================================
   17. Mobile — suite (2026-09-03)
   ============================================================ */

/* 17.1 Décor du hero : la bande est verrouillée en 1717/916 et « couvre » le
   hero. Depuis que celui-ci fait tout l'écran, elle mesurait 1574 px de large
   sur un écran de 375 : seuls 24 % du milieu étaient visibles, donc les
   éléments 3D (placés aux extrémités) tombaient hors champ.
   On réduit la bande ET on rapproche les éléments du centre : la composition
   se « replie » au lieu d'être recadrée. */
@media (max-width:900px){
  /* la bande epouse exactement le hero : plus aucun recadrage lateral */
  .hels-c{ width:100%; min-width:0; height:100%; aspect-ratio:auto; }
  /* Placement mobile explicite : les elements sortent par les quatre bords et
     laissent le centre libre pour le titre et les boutons. Les pourcentages
     d origine (--x/--y) sont pensees pour une bande de 1717x916 en paysage :
     ils n ont plus de sens sur un ecran en portrait. */
  .hel{ width:calc(var(--w) * 1.45); }
  .hel:nth-of-type(1){ left:auto; right:-7%;  top:1%;  }   /* losange      — haut droite */
  /* les deux grands groupes sont retailles pour finir AVANT le sur-titre */
  .hel:nth-of-type(2){ left:-24%; right:auto; top:2%; width:calc(var(--w) * 1.2);  }  /* groupe gauche — haut gauche */
  .hel:nth-of-type(3){ left:auto; right:-20%; top:1%; width:calc(var(--w) * 1.15); }  /* groupe droit  — haut droite */
  .hel:nth-of-type(4){ left:auto; right:-10%; top:78%; }   /* tablette code — bas droite */
  .hel:nth-of-type(5){ left:-3%;  right:auto; top:83%; }   /* cube          — bas gauche */
}

/* 17.2 La pastille « </> » de jonction recouvrait la pilule « NOS SERVICES » :
   le padding haut de la section était à 0 sur mobile. */
@media (max-width:900px){
  #services{ padding-top:3.4rem; }
}

/* 17.3 Appel à l'action de la section méthode : centré. */
@media (max-width:900px){
  .pv3-cta{ text-align:center; }
  .pv3-cta .note{ margin-left:auto; margin-right:auto; }
}

/* 17.4 Blocs France / Suisse : le drapeau passe AU-DESSUS de son texte. */
@media (max-width:560px){
  .frow{ flex-direction:column; align-items:center; text-align:center; gap:0.75rem; }
  .frow .flagchip{ margin:0 auto; }
  .frow p{ max-width:none; }
}

/* 17.5 Chiffres clés (« 1 interlocuteur », « 24 h », « 100 % ») : le filet or
   était un bord GAUCHE, il restait collé au bord pendant que le texte se
   centrait. Il passe au-dessus, centré avec le reste. */
@media (max-width:560px){
  .about-facts{ flex-direction:column; align-items:center; gap:1.3rem; }
  .about-facts div{
    border-left:0; padding-left:0;
    border-top:2px solid var(--goldb); padding-top:0.7rem;
    align-items:center; text-align:center;
    min-width:8.5rem;
  }
  .about-facts span{ max-width:24ch; }
}

/* ============================================================
   18. Centrage généralisé à TOUT le site (mobile ≤ 560 px)
   ============================================================ */
@media (max-width:560px){
  main,section,.wrap,.subhero,.section,.zi-copy,.cs-side{
    text-align:center;
  }

  /* Conteneurs flex : on recentre leur contenu. */
  .subhero-cta,.hero-cta,.cctas,.chips,.zones,.post-meta,.cs-meta,.about-facts,.front-rows,.foot-soc,.s-more,.sv-proof,.bullets,.creed,.cl-mini,.prix-pts,.intro-confiance,.fini-suite,.mini-inc{
    justify-content:center;
  }

  /* Rangées « icône + texte » : en flex, l'élément texte absorbe l'espace
     libre et `justify-content:center` ne fait rien. Flux inline, l'icône
     redevient une puce. */
  .bullets li,.cl-mini li,.fini-suite li,.intro-confiance li,.mini-inc li,.prix-pts li,.sv-proof li{
    display:block;
    text-align:center;
  }
  .bullets li > svg,.cl-mini li > svg,.intro-confiance li > svg,.mini-inc li > svg,.sv-proof li > svg{
    display:inline-block;
    vertical-align:-4px;
    margin-right:0.5rem;
    flex:none;
  }

  /* Les paires image + texte se superposent au lieu de se juxtaposer. */
  .feature-row .fr-txt,.cs-quote,.zi-c{ text-align:center; }

  /* EXCEPTIONS — du texte long centré ne se lit pas. On garde à gauche :
     le corps des articles, les réponses de la FAQ, les pages légales et
     tout ce que la carte Leaflet dessine elle-même. */
  .post-body,.post-body p,.post-body li,.post-body h2,.post-figcap,.qa,.qa .q,.qa .a,.lgx-faits,.lgx-faits dt,.lgx-faits dd,dl,dd,dt,.leaflet-container,.leaflet-container *,pre,code{
    text-align:left;
  }
  .qa .q{ justify-content:space-between; }
}

/* 18.1 Conteneurs en colonne flex : `text-align:center` ne suffit pas, leurs
   enfants sont étirés à gauche. On centre aussi l'axe transversal. */
@media (max-width:560px){
  .f-head,.faq .f-head,.nx-txt,.fr-txt,.zi-copy,.cinfo,.front-rows > div{
    align-items:center;
  }
  /* paires bouton + lien : empilées et centrées, chacune à sa largeur */
  .about-cta{
    display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  /* paragraphes bornés en ch : recentrés dans leur colonne */
  .f-head p,.fr-txt p,.lead,.s-head p,.clede,.m-lead,.zi-copy p,.subhero-lede{
    margin-left:auto; margin-right:auto;
  }
}

/* 19. Liseré clair à la jonction section → pied de page.
   Le pied de page et la section qui le précède partagent exactement la même
   arête (écart mesuré : 0,001 px, à une position sous-pixel de .333). Sur un
   écran à DPR 2 ou 3, l'anticrénelage laisse passer une demi-ligne du fond
   BLANC du parent (.page-rest) : c'est le « trait blanc ».
   On peint 1 px de marine juste au-dessus du pied de page. Aucun décalage de
   mise en page, et la zone couverte est déjà sombre sous le zigzag. */
footer{ box-shadow:0 -1px 0 0 #0E1726; }