/* ==========================================================================
   AIDE & VOUS — site public
   ==========================================================================

   Parti pris : le logo porte déjà quatre couleurs, une maison, une main et
   une signature manuscrite. Si la page en rajoute, l'ensemble devient
   bruyant. Le site est donc **calme autour du logo** — marine, blanc,
   beaucoup de vide — et l'orange n'apparaît qu'à un seul endroit : ce sur
   quoi on veut qu'on clique.

   Deuxième parti pris : aucune police distante. La pile système est
   installée sur l'appareil du visiteur, s'affiche immédiatement, et ne
   demande aucune requête à un tiers. Un site d'artisan local n'a pas
   besoin d'une police à 80 ko qui bloque le premier rendu.

   Aucune dépendance, aucun framework, aucun tracker.
   ========================================================================== */

:root{
  /* --- Marque, relevées sur le logo --- */
  --marine:#071e3a;
  --marine-2:#0d2d52;
  --marine-3:#05172c;
  --bleu:#1769e0;
  --bleu-sombre:#1055bb;
  --bleu-clair:#eaf2ff;
  --orange:#ff7a00;
  --orange-sombre:#e56d00;
  --orange-clair:#fff3e6;
  --vert:#2b8236;          /* teinte accessible : 4,8:1 avec du blanc */
  --vert-clair:#eaf6ec;

  /* --- Neutres, tirés vers le bleu de la marque plutôt que gris purs --- */
  --encre:#0f2036;
  --encre-douce:#42536b;
  --discret:#5c6b81;
  --trait:#e2e9f3;
  --trait-fort:#cfdaea;
  --fond:#f7f9fc;
  --surface:#ffffff;

  /* --- Typographie --- */
  --police:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
           "Helvetica Neue",Arial,sans-serif;

  /* Échelle fluide : une seule déclaration tient du téléphone au grand
     écran, sans point de rupture qui fasse sauter la taille du texte. */
  --t-titre:clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem);
  --t-section:clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --t-carte:clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem);
  --t-intro:clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
  --t-base:1.0rem;
  --t-petit:0.9rem;

  /* --- Espacements --- */
  --e1:.5rem; --e2:.85rem; --e3:1.25rem; --e4:1.85rem;
  --e5:2.75rem; --e6:4rem;
  --section:clamp(3.5rem, 2rem + 6vw, 7rem);

  --r:14px;
  --r-grand:22px;
  --tap:44px;               /* cible tactile minimale */
  --largeur:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  font-family:var(--police);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--encre);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--bleu-sombre)}

/* Un anneau de focus unique, visible sur fond clair comme sur fond marine. */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3{margin:0; line-height:1.15; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}

.conteneur{
  width:100%; max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2.5rem);
}

/* Le texte courant plafonne à ~66 caractères : au-delà, l'œil perd la
   ligne suivante en revenant à gauche. */
.mesure{max-width:66ch}

.lien-evitement{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--marine); color:#fff; padding:14px 20px;
  border-radius:0 0 var(--r) 0; font-weight:600;
}
.lien-evitement:focus{left:0}

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete{position:relative; z-index:40; background:var(--surface)}

.bandeau-contact{background:var(--marine); color:#dbe6f5}
.bandeau-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); min-height:42px; font-size:var(--t-petit);
}
.bandeau-signature{font-style:italic; opacity:.9}
.bandeau-tel{
  color:#fff; text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:var(--tap); padding-inline:.2rem;
}
.bandeau-tel:hover{color:var(--orange)}

/* L'en-tête est le seul bloc plus large que le corps du site : six entrées
   de navigation, un logo et un bouton demandent plus de place qu'une
   colonne de texte, qui elle plafonne volontairement à 1180 px pour rester
   lisible. Sans cet élargissement, le menu se coupait sur deux lignes —
   ou débordait de 77 px une fois empêché de le faire. */
.entete-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); padding-block:var(--e2);
  max-width:1360px;
}
.marque{display:inline-flex; flex:0 0 auto}
.marque img{width:clamp(158px, 20vw, 224px); height:auto}

.navigation{display:flex; align-items:center; gap:var(--e3)}
.navigation ul{
  display:flex; align-items:center; gap:1rem;
  list-style:none; margin:0; padding:0;
}
.navigation a{
  display:inline-flex; align-items:center; min-height:var(--tap);
  color:var(--encre); text-decoration:none; font-weight:600;
  font-size:.93rem; padding-inline:.15rem;
  border-bottom:2px solid transparent;
  /* Une entrée de menu coupée sur deux lignes désaligne toute la barre.
     Au-dessus de 1080 px la place est là ; en dessous, le menu est
     replié et la contrainte disparaît. */
  white-space:nowrap;
}
.navigation a:hover{color:var(--bleu-sombre)}
.navigation a[aria-current="page"]{
  color:var(--marine); border-bottom-color:var(--orange);
}

.entete-actions{display:contents}

.burger{
  display:none;
  width:var(--tap); height:var(--tap);
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
  background:var(--bleu-clair); border:1px solid var(--trait-fort);
  border-radius:11px; cursor:pointer; padding:0;
}
.burger-trait{
  display:block; width:20px; height:2px; background:var(--marine);
  border-radius:2px; transition:transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] .burger-trait:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-trait:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-trait:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.8rem 1.5rem;
  border-radius:11px; border:2px solid transparent;
  font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s;
}
/* L'orange ne sert qu'ici : l'action que l'on souhaite.

   Texte MARINE sur l'orange, et non blanc. Le blanc sur #ff7a00 ne donne
   que 2,61:1 — très en dessous du seuil AA de 4,5:1, et illisible en plein
   soleil, c'est-à-dire exactement la situation de quelqu'un qui cherche un
   artisan depuis son téléphone. Le marine donne 6,40:1 et permet de garder
   l'orange **exact** du logo ; assombrir l'orange jusqu'à supporter du
   blanc l'aurait rendu brun et l'aurait détaché de la marque.
   Mesuré dans Chromium au LOT 11. */
.btn-primaire{background:var(--orange); border-color:var(--orange); color:var(--marine)}
.btn-primaire:hover{background:var(--orange-sombre); border-color:var(--orange-sombre)}
.btn-secondaire{background:transparent; border-color:var(--marine); color:var(--marine)}
.btn-secondaire:hover{background:var(--marine); color:#fff}
.btn-clair{background:#fff; border-color:#fff; color:var(--marine)}
.btn-clair:hover{background:var(--bleu-clair); border-color:var(--bleu-clair)}
.btn-contour-clair{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.btn-contour-clair:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn-large{width:100%}
.nav-cta{padding:.7rem 1.1rem; font-size:.94rem}

/* Déclaré APRÈS `.btn`, à dessein. `.btn` pose `display:inline-flex` ; à
   spécificité égale, c'est la dernière règle écrite qui gagne. Placé plus
   haut — dans la section En-tête, où il semblait pourtant à sa place — ce
   `display:none` était sans effet et le bouton « Devis » du téléphone
   apparaissait aussi sur grand écran, en double avec celui du menu.
   Constaté à l'œil sur une capture, pas par une mesure. */
.cta-mobile{display:none}

/* ==========================================================================
   Héros
   ========================================================================== */
.heros{
  position:relative;
  background:
    linear-gradient(180deg, rgba(7,30,58,.90) 0%, rgba(7,30,58,.78) 55%, rgba(5,23,44,.94) 100%),
    var(--marine);
  color:#fff; overflow:hidden;
}
.heros-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; opacity:.28;
}
.heros-inner{position:relative; z-index:1; padding-block:var(--section)}
.heros-texte{max-width:40rem}

.heros-surtitre{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#ffc48a;
  margin-bottom:var(--e3);
}
.heros h1{font-size:var(--t-titre); font-weight:800; color:#fff}
.heros-sous{
  font-size:var(--t-intro); color:#d7e3f4;
  margin-top:var(--e3); max-width:34rem;
}
.heros-signature{
  margin-top:var(--e3); font-size:1.05rem; font-style:italic;
  color:#ffd7b0;
}
.heros-actions{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  margin-top:var(--e5);
}
.heros-secteur{
  margin-top:var(--e4); font-size:var(--t-petit); color:#b9cbe2;
  display:flex; align-items:center; gap:.5rem;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding-block:var(--section)}
.section-grise{background:var(--fond)}
.section-marine{background:var(--marine); color:#fff}

.section-tete{max-width:44rem; margin-bottom:var(--e6)}
.section-tete.centre{margin-inline:auto; text-align:center}
.surtitre{
  display:block; font-size:.76rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bleu-sombre); margin-bottom:var(--e2);
}
.section-marine .surtitre{color:#ffc48a}
.section h2{font-size:var(--t-section); font-weight:800}
.section-intro{
  margin-top:var(--e3); font-size:var(--t-intro); color:var(--encre-douce);
}
.section-marine .section-intro{color:#c8d7ea}

/* ==========================================================================
   Engagements
   ========================================================================== */
.engagements{
  display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.engagement{
  background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--r); padding:var(--e4);
}
.engagement-marque{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:var(--e3);
  background:var(--bleu-clair); color:var(--bleu-sombre);
  font-size:1.25rem; font-weight:800;
}
.engagement:nth-child(2) .engagement-marque{background:var(--vert-clair); color:var(--vert)}
.engagement:nth-child(3) .engagement-marque{background:var(--orange-clair); color:var(--orange-sombre)}
.engagement:nth-child(4) .engagement-marque{background:#efeafd; color:#5b3fc4}
.engagement h3{font-size:var(--t-carte); margin-bottom:var(--e1)}
.engagement p{color:var(--encre-douce); font-size:.97rem}

/* ==========================================================================
   Services
   ========================================================================== */
.grille-services{
  display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
.carte-service{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:var(--e4);
  transition:border-color .18s, transform .18s;
}
.carte-service:hover{border-color:var(--trait-fort); transform:translateY(-2px)}
/* `h2` autant que `h3` : sur la page Services les cartes portent des
   `h2` (le `h1` est le titre de la page), sur l'accueil des `h3` (le `h1`
   est celui du héros). Ne viser que `h3` laissait les titres de la page
   Services à la taille par défaut du navigateur — deux fois trop gros,
   écrasant l'accroche placée juste en dessous. Vu sur une capture. */
.carte-service h2,
.carte-service h3{font-size:var(--t-carte); margin-bottom:var(--e1)}
.carte-service .accroche{color:var(--encre-douce); font-size:.97rem}
.carte-liste{
  list-style:none; margin:var(--e3) 0 0; padding:0;
  display:grid; gap:.45rem; font-size:.94rem; color:var(--encre-douce);
}
.carte-liste li{display:flex; gap:.6rem; align-items:flex-start}
.carte-liste li::before{
  content:"›"; color:var(--orange); font-weight:800;
  line-height:1.4; flex:0 0 auto;
}
.carte-lien{
  margin-top:var(--e3); padding-top:var(--e3);
  border-top:1px solid var(--trait);
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:var(--tap);
  font-weight:700; text-decoration:none; color:var(--bleu-sombre);
}
/* La flèche avance légèrement au survol : le seul mouvement du site. */
.carte-lien span{transition:transform .18s}
.carte-lien:hover span{transform:translateX(3px)}
.carte-lien:hover{color:var(--orange-sombre)}
.carte-service > .carte-lien{margin-top:auto}

/* ==========================================================================
   Étapes
   ========================================================================== */
.etapes{display:grid; gap:var(--e4)}
/* Cinq colonnes demandent de la largeur : en dessous de 1080 px elles
   débordaient (1203 px mesurés pour 1024 disponibles). */
@media (min-width:1080px){
  .etapes{grid-template-columns:repeat(5, 1fr); gap:var(--e3)}
}
.etape{position:relative; padding-top:var(--e4)}
.etape-numero{
  position:absolute; top:0; left:0;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); color:#fff;
  font-weight:800; font-size:1.1rem;
}
.etape{padding-left:64px}
@media (min-width:1080px){
  .etape{padding-left:0; padding-top:64px}
}
/* `h2` sur la page « Comment ça marche », où chaque étape est un titre de
   niveau 2 sous le `h1` ; `h3` sur l'accueil, où les étapes vivent sous le
   `h2` de la section. Les deux sont justes du point de vue du plan du
   document, et la feuille de style doit donc couvrir les deux : ne viser
   que `h3` laissait les cinq titres de la page dédiée à la taille par
   défaut du navigateur, deux fois trop gros. */
.etape h2,.etape h3{font-size:1.06rem; margin-bottom:var(--e1)}
.etape p{color:var(--encre-douce); font-size:.95rem}
.section-marine .etape p{color:#c8d7ea}

/* ==========================================================================
   Appel à l'action
   ========================================================================== */
.bloc-cta{
  background:linear-gradient(135deg, var(--marine) 0%, var(--marine-2) 100%);
  color:#fff; border-radius:var(--r-grand);
  padding:clamp(2rem, 1rem + 4vw, 3.5rem);
  text-align:center;
}
.bloc-cta h2{font-size:var(--t-section); margin-bottom:var(--e3)}
.bloc-cta p{color:#c8d7ea; max-width:44ch; margin-inline:auto}
.bloc-cta .actions{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  justify-content:center; margin-top:var(--e4);
}

/* ==========================================================================
   Blocs de contenu
   ========================================================================== */
.panneau{
  background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:var(--e5);
}
.panneau + .panneau{margin-top:var(--e3)}

.note{
  background:var(--bleu-clair); border-left:4px solid var(--bleu);
  border-radius:0 var(--r) var(--r) 0; padding:var(--e3) var(--e4);
  color:var(--encre-douce); font-size:.97rem;
}
.note-orange{background:var(--orange-clair); border-left-color:var(--orange)}
.note strong{color:var(--encre)}

.etat-vide{
  text-align:center; padding:var(--e6) var(--e4);
  background:var(--fond); border:1px dashed var(--trait-fort);
  border-radius:var(--r-grand);
}
.etat-vide h2{font-size:var(--t-carte); margin-bottom:var(--e2)}
.etat-vide p{color:var(--encre-douce); max-width:46ch; margin-inline:auto}

.puces{margin:var(--e3) 0 0; padding-left:1.2rem; color:var(--encre-douce)}
.puces li{margin-bottom:.5rem}

/* Coordonnées */
.grille-contact{
  display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.carte-contact{
  background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:var(--e4);
}
.carte-contact h2{font-size:var(--t-carte); margin-bottom:var(--e2)}
.carte-contact .valeur{
  display:inline-flex; align-items:center; min-height:var(--tap);
  font-size:1.18rem; font-weight:800; color:var(--marine);
  text-decoration:none;
}
.carte-contact .valeur:hover{color:var(--bleu-sombre)}
.carte-contact address{font-style:normal; color:var(--encre-douce); line-height:1.7}

/* Zones */
.liste-zones{
  display:flex; flex-wrap:wrap; gap:var(--e2);
  list-style:none; margin:var(--e4) 0 0; padding:0;
}
.liste-zones li{
  background:var(--bleu-clair); color:var(--marine);
  border:1px solid #d3e2fb; border-radius:999px;
  padding:.6rem 1.15rem; font-weight:700; font-size:.95rem;
}

/* Pages légales : texte long, lecture confortable */
.texte-legal{max-width:72ch}
.texte-legal h2{
  font-size:1.3rem; margin-top:var(--e5); margin-bottom:var(--e2);
  padding-bottom:.5rem; border-bottom:1px solid var(--trait);
}
.texte-legal h2:first-of-type{margin-top:0}
.texte-legal h3{font-size:1.05rem; margin-top:var(--e4); margin-bottom:var(--e1)}
.texte-legal p{margin-bottom:var(--e2); color:var(--encre-douce)}
.texte-legal dl{margin:var(--e3) 0 0}
.texte-legal dt{font-weight:700; margin-top:var(--e2)}
.texte-legal dd{margin:0 0 0 0; color:var(--encre-douce)}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{background:var(--marine); color:#c3d3e8; margin-top:var(--section)}
.pied-grille{
  display:grid; gap:var(--e5);
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  padding-block:var(--e6);
}
.pied-marque img{width:186px; background:#fff; border-radius:12px; padding:10px}
.pied-signature{margin-top:var(--e3); font-style:italic; color:#ffd7b0}
.pied-activite{margin-top:.4rem; font-size:var(--t-petit); color:#96abc7}
.pied h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.14em;
         color:#fff; margin-bottom:var(--e3)}
.pied-liens{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.pied-liens a{
  display:inline-flex; align-items:center; min-height:var(--tap);
  color:#c3d3e8; text-decoration:none;
}
.pied-liens a:hover{color:#fff; text-decoration:underline}
.pied-adresse{font-style:normal; margin-top:var(--e3); line-height:1.7;
              font-size:.95rem; color:#96abc7}
.pied-bas{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:var(--e3);
  font-size:var(--t-petit); color:#8ba3c1;
}

/* ==========================================================================
   Téléphone
   ==========================================================================
   La navigation se replie sous 900 px. En dessous, le menu s'ouvre en
   colonne : chaque entrée occupe toute la largeur, aucune n'est effleurée
   par erreur, et le bouton devis reste le dernier élément — celui qu'on
   atteint le plus facilement au pouce.
   ========================================================================== */
/* Seuil à 1080 px et non 900 : à 1024, six entrées de navigation plus le
   bouton « Demander un devis » plus le logo ne tiennent pas — mesuré à
   1028 px pour 1024 disponibles, soit un débordement de 4 px sur toutes
   les pages. Réduire la taille du texte du menu aurait résolu le chiffre
   en dégradant la lisibilité ; replier le menu est la vraie réponse. */
@media (max-width:1080px){
  .burger{display:flex}

  /* Le bouton devis reste VISIBLE dans l'en-tête, à côté du menu : c'est
     l'action principale du site, elle ne doit pas se cacher derrière un
     geste supplémentaire. Il porte un libellé court pour tenir à côté du
     logo, et le libellé complet reste dans le menu déplié. */
  .cta-mobile{display:inline-flex; padding:.7rem 1rem; font-size:.94rem}
  .entete-actions{display:flex; align-items:center; gap:var(--e2)}

  .navigation{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface);
    border-top:1px solid var(--trait);
    box-shadow:0 18px 32px rgba(7,30,58,.14);
    padding:var(--e2) clamp(1.1rem, 4vw, 2.5rem) var(--e4);
    display:none;
  }
  .navigation.ouvert{display:flex}

  /* Voile sous le menu déplié.
     Sans lui, le panneau blanc s'arrêtait net et le bouton orange du héros
     réapparaissait juste dessous : à la lecture d'une capture, on croyait à
     un second bouton « devis » collé au premier. Le voile éteint la page et
     le menu redevient la seule chose lisible.

     `z-index:-1` place le voile derrière le panneau tout en le laissant
     dans le contexte d'empilement de l'en-tête (`z-index:40`), donc au-
     dessus du contenu. `top:100%` le fait commencer sous l'en-tête, jamais
     par-dessus le logo ni le bouton de fermeture.

     Un clic dessus atteint `.entete` : le gestionnaire « clic à l'extérieur »
     de site.js referme donc le menu, ce qui est le geste attendu. */
  .entete:has(.navigation.ouvert)::after{
    content:"";
    position:absolute; top:100%; left:0; right:0; height:100vh;
    background:rgba(7,30,58,.62);
    z-index:-1;
  }
  .navigation ul{flex-direction:column; align-items:stretch; gap:0}
  .navigation li{border-bottom:1px solid var(--trait)}
  /* `display:flex` et non `inline-flex` : le trait de séparation doit
     courir sur toute la largeur du menu. En `inline-flex` il s'arrêtait à
     la fin du mot, et les six lignes n'avaient pas la même longueur. */
  .navigation a{
    display:flex; min-height:52px; font-size:1.05rem;
    border-bottom:none;
  }
  .navigation a[aria-current="page"]{color:var(--bleu-sombre)}
  .nav-cta{margin-top:var(--e3); width:100%}

  .heros-actions .btn{width:100%}
  .bloc-cta .actions .btn{width:100%}
}

@media (max-width:520px){
  .bandeau-signature{display:none}
  .bandeau-inner{justify-content:center}
  /* Sous 520 px, le logo cède la place : le bouton devis et le menu
     comptent davantage que quelques pixels d'image. */
  .marque img{width:128px}
  .cta-mobile{padding:.7rem .85rem}
}

/* ==========================================================================
   Impression
   ========================================================================== */
@media print{
  .bandeau-contact,.burger,.navigation,.heros-photo,.bloc-cta{display:none}
  .heros{background:none; color:#000}
  .pied{background:none; color:#000}
  body{font-size:11pt}
}

/* ==========================================================================
   Utilitaires
   ==========================================================================
   Écrits pour supprimer tout attribut `style=` des gabarits du site public.
   Ce n'est pas une préférence de style : c'est ce qui permet à la CSP
   publique d'interdire `style-src 'unsafe-inline'`, donc d'être strictement
   plus dure que celle du back-office, où 158 styles inline subsistent.

   La liste est volontairement courte. Un jeu d'utilitaires qui grossit sans
   fin finit par remplacer la feuille de style, et on perd les deux.
   ========================================================================== */
.mt-2{margin-top:var(--e2)}
.mt-3{margin-top:var(--e3)}
.mt-4{margin-top:var(--e4)}
.mt-5{margin-top:var(--e5)}
.mt-6{margin-top:var(--e6)}
.mb-4{margin-bottom:var(--e4)}

/* Sélecteur doublé, et ce n'est pas une coquille.

   Un utilitaire de taille posé sur un titre doit gagner contre la règle
   contextuelle qui vise ce même titre. `.section h2` pèse une classe et un
   type (0,1,1) et l'emportait sur `.t-carte` (0,1,0) : sur la page Zone
   d'intervention, « Communes desservies » s'affichait à 40 px, plus gros
   que le `h1` de la page. Doubler la classe porte l'utilitaire à (0,2,0) :
   il gagne, sans `!important`, et sans dépendre de sa position dans le
   fichier.

   Même cause pour `.t-etape`, retiré : il perdait contre `.section h2` et
   laissait les cinq titres d'étapes à 40 px. Sa taille est désormais portée
   par `.etape h2, .etape h3`, une règle contextuelle de même poids que
   celle qui la concurrençait. */
.t-carte.t-carte{font-size:var(--t-carte)}
.t-section.t-section{font-size:var(--t-section)}
.t-intro.t-intro{font-size:var(--t-intro)}
.t-petit.t-petit{font-size:var(--t-petit)}

.doux{color:var(--encre-douce)}
.doux-petit{color:var(--encre-douce); font-size:.95rem}
.discret{color:var(--discret)}
.separateur{color:var(--trait-fort)}
.pale{opacity:.6; font-weight:600}

/* Une liste ordonnée qui garde sa sémantique sans les puces natives : la
   numérotation est portée visuellement par `.etape-numero`. */
.liste-nue{list-style:none; margin:0; padding:0}

.adresse-bloc{
  font-style:normal; margin-top:var(--e3);
  color:var(--encre-douce); line-height:1.8;
}
/* Le fil d'Ariane et les coordonnées des pages légales sont des liens
   ISOLÉS : l'exemption WCAG « lien dans une phrase » ne s'y applique pas,
   ils doivent donc atteindre la hauteur d'une vraie cible. */
.fil-ariane{margin-bottom:var(--e4); font-size:.9rem}
.fil-ariane a{display:inline-flex; align-items:center; min-height:24px}
.texte-legal dd > a:only-child{display:inline-flex; align-items:center;
                               min-height:24px}

@media (max-width:1024px), (pointer:coarse){
  .fil-ariane a,
  .texte-legal dd > a:only-child{min-height:var(--tap)}
}
.carte-autre{background:var(--orange-clair); border-color:#ffd9b3}

/* ==========================================================================
   FORMULAIRE PUBLIC DE DEMANDE DE DEVIS — LOT 12
   ==========================================================================

   Le formulaire est la page la plus utilisée du site et la plus fragile :
   c'est la seule où le visiteur peut échouer. Trois partis pris.

   **Une colonne étroite.** 46 rem — plus étroit que le reste du site. Un
   champ large invite à écrire au kilomètre et donne à la page un air de
   déclaration administrative. Une colonne étroite se lit d'un regard et
   tient telle quelle sur téléphone.

   **Les cibles sont grandes partout.** Champs, cases, boutons radio : tout
   atteint 44 px de haut. Cocher « mardi » avec un pouce sur un écran de
   390 px ne doit pas demander de viser.

   **L'erreur passe avant le champ.** Le message est placé au-dessus de la
   saisie, pas en dessous : sur téléphone, un message sous le champ passe
   sous le clavier qui vient de s'ouvrir, et le visiteur ne voit jamais ce
   qu'on lui reproche.
   ========================================================================== */

.section-formulaire{background:var(--fond); padding-block:var(--e6)}
.conteneur-etroit{max-width:46rem}

/* ---------- Progression ---------- */
.progression{margin-bottom:var(--e4)}
.progression-texte{
  font-size:var(--t-petit); color:var(--encre-douce);
  margin-bottom:var(--e2);
}
.progression-texte strong{color:var(--marine)}

/* Les jalons sont une frise sur grand écran, et une simple barre remplie
   sur téléphone : sept libellés côte à côte y seraient illisibles. */
.progression-liste{display:flex; gap:4px}
.jalon{flex:1 1 0; min-width:0}
.jalon > *{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .3rem;
  border-top:4px solid var(--trait-fort);
  color:var(--discret); text-decoration:none;
  font-size:.78rem; line-height:1.25;
}
.jalon-fait > *{border-top-color:var(--vert); color:var(--encre-douce)}
.jalon-courant > *{border-top-color:var(--orange); color:var(--marine); font-weight:700}
.jalon a:hover{color:var(--marine)}
.jalon-puce{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--trait); color:var(--encre-douce);
  font-size:.72rem; font-weight:700;
}
.jalon-fait .jalon-puce{background:var(--vert-clair); color:var(--vert)}
.jalon-courant .jalon-puce{background:var(--orange); color:var(--marine)}
/* Le nom de l'étape est retiré de l'affichage — mais pas de la page.
   Huit libellés dans une colonne de 46 rem donnent 55 px chacun, c'est-à-dire
   « Votr… », « Vos … », « L'ad… » : huit fois rien. La frise garde donc ses
   pastilles numérotées, qui suffisent à situer et à revenir en arrière, et
   l'information reste écrite en toutes lettres juste au-dessus — « Étape 3
   sur 8 — Vos photos » — ainsi que dans le nom accessible de chaque lien. */
.jalon-nom{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.jalon > *{justify-content:center}

@media (max-width:520px){
  /* Sous 520 px, même les pastilles se serrent : la frise devient une
     jauge. Le texte « Étape 3 sur 8 — Vos photos » porte alors seul
     l'information — la couleur ne fait que l'illustrer, jamais l'énoncer. */
  .jalon-puce{display:none}
  .jalon > *{padding:0; height:6px; border-top-width:6px; border-radius:3px}
  .progression-liste{gap:5px}
}

/* ---------- La carte ---------- */
.carte-formulaire{
  background:var(--surface);
  border:1px solid var(--trait);
  border-radius:var(--r-grand);
  padding:clamp(1.4rem, 4vw, 2.6rem);
}
.carte-formulaire h1{
  font-size:var(--t-section); font-weight:800; color:var(--marine);
}
/* `site.js` place le focus sur ce titre à chaque étape, pour qu'un lecteur
   d'écran annonce « Ajoutez des photos » au lieu de relire le menu depuis
   le début. Le navigateur dessine alors son anneau de focus autour du
   titre, ce qui donnait un gros cadre noir sur toutes les captures.

   Le supprimer est ici légitime, et c'est l'exception qui confirme la
   règle : ce titre porte `tabindex="-1"`, il n'est donc **jamais**
   atteignable au clavier. Personne ne peut s'y trouver sans savoir
   pourquoi il y est. Aucun élément réellement navigable ne perd son
   anneau. */
.carte-formulaire h1:focus{outline:none}
.chapeau-etape{
  margin-top:var(--e3); color:var(--encre-douce);
  font-size:var(--t-intro); line-height:1.55;
}
.carte-formulaire form{margin-top:var(--e5)}

/* ---------- Champs ---------- */
.champ{margin-bottom:var(--e4)}
.champ label{
  display:block; font-weight:700; color:var(--marine);
  margin-bottom:.35rem; font-size:.98rem;
}
.champ .aide{
  color:var(--discret); font-size:var(--t-petit);
  margin-bottom:.4rem; line-height:1.45;
}
.requis{color:var(--orange); font-weight:800}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="file"],
.champ select,
.champ textarea{
  width:100%; min-height:var(--tap);
  padding:.7rem .9rem;
  font-family:inherit; font-size:1rem; color:var(--encre);
  background:var(--surface);
  border:2px solid var(--trait-fort); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
.champ textarea{min-height:9rem; line-height:1.55; resize:vertical}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  border-color:var(--bleu); outline:none;
  box-shadow:0 0 0 3px rgba(23,105,224,.18);
}
.champ input::placeholder, .champ textarea::placeholder{color:#9aa7b8}

/* L'erreur : un liseré, un pictogramme et un texte. Trois signaux, dont
   deux ne dépendent pas de la couleur — un daltonien voit le ⚠ et lit la
   phrase même si le rouge lui échappe. */
.champ-erreur input, .champ-erreur textarea, .champ-erreur select{
  border-color:#c0392b; background:#fffafa;
}
.erreur{
  display:flex; gap:.45rem; align-items:flex-start;
  color:#a5281b; font-size:var(--t-petit); font-weight:600;
  margin-bottom:.45rem; line-height:1.45;
}

/* ---------- Groupes de choix ---------- */
.groupe{border:0; margin:0; padding:0}
.groupe legend{
  font-weight:700; color:var(--marine); font-size:.98rem;
  margin-bottom:.5rem; padding:0;
}
.options{display:grid; gap:.55rem}
.option{position:relative}
/* Le libellé porte tout le cadre : la zone cliquable fait la largeur de la
   colonne, pas la taille du petit rond. */
.option label{
  display:flex; align-items:center; gap:.75rem;
  min-height:var(--tap); margin:0;
  padding:.7rem 1rem .7rem 2.9rem;
  border:2px solid var(--trait); border-radius:12px;
  font-weight:500; color:var(--encre); cursor:pointer;
  transition:border-color .15s, background-color .15s;
}
.option input{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; accent-color:var(--bleu-sombre);
  margin:0; cursor:pointer;
}
.option label:hover{border-color:var(--trait-fort); background:var(--fond)}
.option input:checked + label{
  border-color:var(--bleu); background:var(--bleu-clair);
  color:var(--marine); font-weight:700;
}
.option input:focus-visible + label{
  outline:3px solid var(--orange); outline-offset:2px;
}

/* ---------- Case à cocher isolée ---------- */
.case{display:flex; gap:.8rem; align-items:flex-start}
.case input{
  flex:0 0 auto; width:24px; height:24px; margin:.15rem 0 0;
  accent-color:var(--bleu-sombre); cursor:pointer;
}
.case label{
  font-weight:500; color:var(--encre); line-height:1.5;
  margin:0; cursor:pointer;
}
.consentement{
  background:var(--fond); border:1px solid var(--trait);
  border-radius:12px; padding:var(--e3);
}

/* ---------- Deux champs sur une ligne ---------- */
.duo-champs{display:grid; gap:0 var(--e3); grid-template-columns:1fr 1fr}
.duo-cp{grid-template-columns:9rem 1fr}
@media (max-width:520px){
  .duo-champs, .duo-cp{grid-template-columns:1fr}
}

/* ---------- Actions ---------- */
.actions-etape{
  display:flex; gap:var(--e2); flex-wrap:wrap;
  margin-top:var(--e5); padding-top:var(--e4);
  border-top:1px solid var(--trait);
}
.actions-etape .btn-primaire{margin-left:auto}
.btn-contour{
  background:transparent; border-color:var(--trait-fort);
  color:var(--encre-douce);
}
.btn-contour:hover{border-color:var(--marine); color:var(--marine)}
@media (max-width:520px){
  /* Sur téléphone, le bouton qui fait avancer passe en premier et prend
     toute la largeur : c'est le geste attendu dans 95 % des cas. */
  .actions-etape{flex-direction:column-reverse}
  .actions-etape .btn{width:100%; margin-left:0}
}

/* ---------- Alertes ---------- */
.alerte{
  border-radius:12px; padding:var(--e3) var(--e4);
  margin-bottom:var(--e4); font-size:.97rem; line-height:1.5;
  border-left:4px solid;
}
.alerte p{margin:0}
.alerte p + p{margin-top:.4rem}
.alerte-erreur{background:#fdeeec; border-color:#c0392b; color:#8c2318}
.alerte-attention{background:var(--orange-clair); border-color:var(--orange); color:#8a4a00}
.alerte-info{background:var(--bleu-clair); border-color:var(--bleu); color:var(--marine)}
.note-douce{background:var(--fond); border-left-color:var(--trait-fort)}

/* ---------- Photos ---------- */
.depot-photo{
  background:var(--fond); border:2px dashed var(--trait-fort);
  border-radius:var(--r-grand); padding:var(--e4);
}
.depot-photo .champ{margin-bottom:var(--e2)}
/* Le contrôle de fichier reste **natif**. On habille seulement son bouton :
   le remplacer par un faux bouton oblige à masquer l'input, donc à
   reconstruire à la main le focus clavier et l'annonce du fichier choisi —
   trois occasions de casser quelque chose pour un gain esthétique. Le
   libellé « Choisir un fichier » est celui du navigateur, dans la langue du
   visiteur : c'est une qualité, pas un oubli de traduction. */
.depot-photo input[type="file"]{
  padding:.55rem; background:var(--surface); cursor:pointer;
}
.depot-photo input[type="file"]::file-selector-button{
  margin-right:.9rem; min-height:36px; padding:0 1rem;
  background:var(--bleu-clair); color:var(--marine);
  border:1px solid var(--trait-fort); border-radius:8px;
  font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer;
}
.depot-photo input[type="file"]::file-selector-button:hover{
  background:var(--trait); border-color:var(--bleu);
}
.depot-photo .aide{margin:var(--e2) 0}

.galerie-temp{
  display:grid; gap:var(--e3); margin-top:var(--e3);
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.vignette{
  background:var(--surface); border:1px solid var(--trait);
  border-radius:12px; overflow:hidden;
}
.vignette img{
  width:100%; height:110px; object-fit:cover; display:block;
  background:var(--trait);
}
.vignette-pied{
  padding:.55rem .7rem; display:grid; gap:.2rem;
  font-size:.78rem; color:var(--discret);
}
.vignette-nom{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--encre-douce); font-weight:600;
}
.btn-retirer{
  margin-top:.25rem; width:100%; min-height:36px;
  background:transparent; border:1px solid var(--trait-fort);
  border-radius:8px; color:#a5281b; font-weight:700; font-size:.8rem;
  font-family:inherit; cursor:pointer;
}
.btn-retirer:hover{background:#fdeeec; border-color:#c0392b}
.mention-photos{
  margin-top:var(--e3); font-size:var(--t-petit);
  color:var(--discret); line-height:1.5;
}

/* ---------- Récapitulatif ---------- */
.recap{margin-top:var(--e5); border-top:1px solid var(--trait)}
.recap-ligne{
  display:grid; gap:.2rem var(--e3);
  grid-template-columns:11rem 1fr;
  padding:var(--e3) 0; border-bottom:1px solid var(--trait);
}
.recap dt{
  font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--discret); padding-top:.15rem;
}
.recap dd{margin:0; color:var(--encre); line-height:1.55}
.recap-texte{white-space:pre-wrap}
/* `flex` et non `inline-flex` : le lien prend sa propre ligne. Collé en
   fin de valeur, il se lisait « Petits travaux Modifier », comme si
   « Modifier » faisait partie de la réponse. */
.recap-modifier{
  display:flex; align-items:center; width:fit-content;
  min-height:var(--tap); margin-top:.15rem;
  font-size:var(--t-petit); font-weight:700;
}
.recap-photos{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem;
}
.recap-photos img{
  width:78px; height:64px; object-fit:cover;
  border-radius:8px; border:1px solid var(--trait);
}
@media (max-width:600px){
  .recap-ligne{grid-template-columns:1fr}
}

.envoi{margin-top:var(--e5)}
.actions-envoi{border-top:0; padding-top:0}

/* Le champ piège. Retiré de l'écran sans `display:none` ni
   `visibility:hidden` : un robot un peu sérieux lit la feuille de style et
   saute ce qui est explicitement caché. Là, le champ existe, il a une
   taille, il est simplement hors du cadre. */
.piege{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- Confirmation ---------- */
.carte-succes{text-align:center}
.marque-succes{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; margin-bottom:var(--e3);
  border-radius:50%; background:var(--vert-clair); color:var(--vert);
  font-size:2rem; font-weight:800;
}
.reference-demande{
  display:inline-grid; gap:.15rem; margin-top:var(--e4);
  padding:var(--e3) var(--e5);
  background:var(--fond); border:1px solid var(--trait);
  border-radius:12px;
}
.reference-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--discret); font-weight:700;
}
.reference-demande strong{
  font-size:1.35rem; color:var(--marine); letter-spacing:.02em;
}
.carte-rappel{
  margin-top:var(--e5); padding:var(--e4);
  background:var(--fond); border-radius:var(--r-grand);
  display:grid; gap:var(--e2); justify-items:center;
}
.carte-rappel p{margin:0}

/* ---------- Abandon ---------- */
.abandon{margin-top:var(--e4); text-align:center}
.lien-discret{
  background:none; border:0; padding:.6rem 1rem;
  min-height:var(--tap);
  font-family:inherit; font-size:var(--t-petit);
  color:var(--discret); text-decoration:underline; cursor:pointer;
}
.lien-discret:hover{color:var(--encre-douce)}

/* ---------- Utilitaire d'accessibilité ---------- */
/* Visible des seuls lecteurs d'écran. `clip-path` plutôt que
   `display:none`, qui retirerait le texte de l'arbre d'accessibilité —
   c'est-à-dire exactement l'inverse du but. */
.hors-ecran{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Bouton en cours d'envoi ---------- */
/* Posé par site.js au premier clic. Sans JavaScript, la protection
   d'idempotence côté serveur fait le travail seule ; ceci n'est qu'un
   retour visuel immédiat. */
.btn[aria-disabled="true"]{opacity:.65; cursor:progress}

/* Un encadré qui porte une action : le texte, puis le bouton en dessous.
   Sans cette règle, le bouton se glissait à la suite de la phrase et
   n'avait que la hauteur d'une ligne — 18 px, mesuré au LOT 13, là où une
   cible tactile en demande 44. */
.note-action{display:grid; gap:var(--e3); justify-items:start}
.note-action p{margin:0}