/*
Theme Name:   KiteRepair
Theme URI:    https://kiterepair.fr
Author:       Matthieu Milliot
Description:  Thème sur mesure pour l'atelier KiteRepair — responsive, léger, avec module de devis WhatsApp intégré. Conçu pour préserver les URLs et le référencement acquis depuis 2011.
Version:      1.6.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  kiterepair
Tags:         responsive, business, one-column, custom-menu, custom-logo
*/


:root{
  --rouge:#E03A28;
  --rouge-fonce:#B62B1C;
  --rouge-pale:#FDF0EE;
  --encre:#1A2026;
  --encre-2:#4C5A64;
  --encre-3:#7B8B96;
  --fond:#FFFFFF;
  --fond-2:#F4F6F7;
  --fond-3:#E8ECEE;
  --trait:#DDE3E6;
  --mer:#33586B;
  --wa:#25D366;
  --wa-fonce:#128C7E;
  --r:4px;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:112.5%;} /* 18 px : base de toute l'échelle */
body{
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.62;color:var(--encre);background:var(--fond);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Source Sans 3",sans-serif;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--rouge);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px;}

/* ---------- barre supérieure ---------- */
.topbar{background:var(--encre);color:#fff;font-size:.85rem;padding:7px 0;}
.topbar .wrap{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;text-align:center;}
.topbar b{color:#fff;font-weight:600;}
.topbar .delai{color:var(--wa);font-weight:700;}
.topbar span{color:#B8C4CC;}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--trait);}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
.logo img{width:170px;}
nav ul{display:flex;gap:24px;list-style:none;align-items:center;}
nav a{color:var(--encre);text-decoration:none;font-weight:600;font-size:.95rem;}
nav a:hover{color:var(--rouge);}
.burger{display:none;background:none;border:1px solid var(--trait);border-radius:var(--r);
  padding:8px 10px;cursor:pointer;font-size:1.1rem;line-height:1;}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r);font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .15s,border-color .15s;}
.btn-wa{background:var(--wa);color:#0B3D26;border-color:var(--wa);}
.btn-wa:hover{background:#1FBE5A;border-color:#1FBE5A;}
.btn-primaire{background:var(--rouge);color:#fff;border-color:var(--rouge);}
.btn-primaire:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce);}
.btn-fantome{background:transparent;color:var(--encre);border-color:var(--trait);}
.btn-fantome:hover{border-color:var(--encre);}
.btn svg{width:19px;height:19px;flex:none;}

/* ---------- hero ---------- */
.hero{background:var(--fond-2);border-bottom:1px solid var(--trait);padding:44px 0 40px;}
.hero-grille{display:grid;gap:32px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rouge);margin-bottom:14px;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--rouge);}
.hero h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:800;margin-bottom:14px;}
.hero .accroche{font-size:1.16rem;color:var(--encre-2);max-width:52ch;margin-bottom:24px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.preuves{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--trait);padding-top:18px;}
.preuve{padding-right:22px;margin-right:22px;border-right:1px solid var(--trait);}
.preuve:last-child{border-right:0;margin-right:0;padding-right:0;}
.preuve b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;font-weight:700;line-height:1.15;}
.preuve span{font-size:.89rem;color:var(--encre-3);}
.preuve .etoiles{color:var(--rouge);letter-spacing:.05em;}
.hero-photo{position:relative;}
.hero-cadre{position:relative;aspect-ratio:4/3;background:#1d242b;
  border-radius:var(--r);overflow:hidden;display:block;}
.hero-cadre img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;}
.hero-photo figcaption{font-size:.85rem;color:var(--encre-3);margin-top:8px;}

/* --- Hero : la même aile avant et après ---
   La figure est rendue focalisable au clavier pour que l'effet ne dépende pas
   de la souris ; le curseur en loupe signale qu'il y a quelque chose à voir. */
.hero-cadre--duo{cursor:zoom-in;}
.hero-cadre--duo:focus{outline:3px solid var(--rouge);outline-offset:3px;}
.hero-cadre--duo .hero-apres{
  position:absolute;inset:0;height:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .7s cubic-bezier(.4,0,.2,1);}
.hero-cadre--duo:hover .hero-apres,
.hero-cadre--duo:focus .hero-apres{clip-path:inset(0 0 0 0);}

/* Le trait lumineux qui suit le bord du balayage. C'est lui qui rend la synchro
   lisible : le mot bascule au moment où le trait passe le milieu du cadre. */
.hero-cadre--duo{--kr-trait:4px;}
.hero-cadre--duo::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:var(--kr-trait);z-index:1;
  background:var(--wa);opacity:0;pointer-events:none;
  transition:left .7s cubic-bezier(.4,0,.2,1),opacity .2s;}
.hero-cadre--duo:hover::after,
.hero-cadre--duo:focus::after{opacity:1;left:calc(100% - var(--kr-trait));}

/* --- Étiquette « Avant / Après » ---
   Les deux mots sont empilés dans la même cellule de grille et basculent en
   OPACITÉ, jamais en `display`. Deux raisons : `display` n'est pas animable, ce
   qui rendait le changement de mot impossible hors survol — donc muet sur
   mobile ; et la boîte prend d'emblée la largeur du mot le plus long, elle ne
   saute donc plus au basculement. */
.hero-etiquette{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-grid;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;line-height:1.3;
  background:rgba(26,32,38,.85);color:#fff;
  transition:background .22s,color .22s;}
/* Relais, et non fondu croisé : les deux mots occupent le même pixel, un fondu
   simultané les rendrait illisibles pendant la transition. Le mot sortant part
   d'abord, le suivant n'arrive qu'ensuite — d'où les délais, portés par l'état
   d'ARRIVÉE de chaque sens : au survol c'est « Avant » qui part sans délai,
   à la sortie c'est « Après ». */
.hero-etiquette>span{grid-area:1/1;transition:opacity .14s linear;}
.hero-etiquette .et-avant{opacity:1;transition-delay:.14s;}
.hero-etiquette .et-apres{opacity:0;transition-delay:0s;}
.hero-cadre--duo:hover .hero-etiquette,
.hero-cadre--duo:focus .hero-etiquette{background:var(--wa);color:#0B3D26;}
.hero-cadre--duo:hover .et-avant,
.hero-cadre--duo:focus .et-avant{opacity:0;transition-delay:0s;}
.hero-cadre--duo:hover .et-apres,
.hero-cadre--duo:focus .et-apres{opacity:1;transition-delay:.14s;}

/* Sans souris il n'y a pas de survol : les quatre composants de l'effet —
   photo, trait, fond de l'étiquette et mots — tournent sur la MÊME durée et aux
   MÊMES pourcentages de keyframes, sinon la rubrique perd son sens. */
@media (hover:none){
  .hero-cadre--duo .hero-apres    {animation:kr-bascule   7s ease-in-out infinite;}
  .hero-cadre--duo::after         {animation:kr-trait     7s ease-in-out infinite;}
  .hero-cadre--duo .hero-etiquette{animation:kr-etiquette 7s ease-in-out infinite;}
  .hero-cadre--duo .et-avant      {animation:kr-mot-avant 7s ease-in-out infinite;}
  .hero-cadre--duo .et-apres      {animation:kr-mot-apres 7s ease-in-out infinite;}
}
@media (prefers-reduced-motion:reduce){
  .hero-cadre--duo .hero-apres,.hero-cadre--duo::after,
  .hero-cadre--duo .hero-etiquette,
  .hero-cadre--duo .et-avant,.hero-cadre--duo .et-apres{animation:none;transition:none;}
}

/* ---------- sections ---------- */
section{padding:52px 0;}
.sec-titre{margin-bottom:8px;font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:700;}
.sec-intro{color:var(--encre-2);max-width:62ch;margin-bottom:30px;}
.gris{background:var(--fond-2);}
.sombre{background:var(--encre);color:#fff;}
.sombre .sec-intro{color:#B8C4CC;}
.sombre .sec-titre{color:#fff;}

/* ---------- devis WhatsApp ---------- */
.devis{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--wa);
  border-radius:var(--r);padding:26px;}
.devis h3{font-size:1.3rem;margin-bottom:6px;}
.devis .sous{color:var(--encre-2);font-size:.95rem;margin-bottom:22px;}
.champs{display:grid;gap:16px;grid-template-columns:1fr;}
.champ label{display:block;font-weight:700;font-size:.88rem;margin-bottom:5px;}
.champ select,.champ input[type=text]{
  width:100%;padding:11px 12px;border:1px solid var(--trait);border-radius:var(--r);
  font-family:inherit;font-size:1rem;background:#fff;color:var(--encre);}
.champ select:focus,.champ input:focus{border-color:var(--wa);outline:none;box-shadow:0 0 0 3px rgba(37,211,102,.18);}
.puces{display:flex;gap:8px;flex-wrap:wrap;}
.puce{position:relative;}
.puce input{position:absolute;opacity:0;width:0;height:0;}
.puce span{display:inline-block;padding:9px 14px;border:1px solid var(--trait);border-radius:var(--r);
  font-size:.92rem;cursor:pointer;background:#fff;user-select:none;}
.puce input:checked + span{border-color:var(--wa-fonce);background:#E9FBF0;font-weight:700;color:#0B3D26;}
.puce input:focus-visible + span{outline:3px solid var(--rouge);outline-offset:2px;}
/* Le schéma légendé accompagne le choix de la zone : à droite sur grand écran,
   au-dessus des puces sur téléphone, où l'image sert de repère avant de cocher. */
.zone-aide{display:grid;gap:16px;align-items:start;}
/* Le schéma est un PNG transparent qui mêle des traits de légende BLANCS et
   du texte NOIR : 21 % de ses pixels opaques sont clairs, 10 % sombres. Aucun
   fond clair ni foncé ne convient donc aux deux, il faut le gris d'équilibre.
   #6B747C donne 3,6:1 sur les traits blancs et 3,4:1 sur le texte noir — les
   deux au-dessus du minimum de 3:1 exigé pour un graphique.

   Le `mix-blend-mode:multiply` posé ici au départ était une erreur : en fusion
   multiply, le blanc devient transparent, donc les traits de légende
   disparaissaient purement et simplement. */
.schema-aile{margin:0 auto;background:#6B747C;border:1px solid #5A626A;
  border-radius:var(--r);padding:12px;width:100%;max-width:475px;}
/* Le PNG mesure 451 x 325 px et rien de plus : au-delà, les libellés de
   légende — déjà fins — deviennent flous. Le cadre est donc calé sur cette
   largeur native (451 + 2 x 12 px de marge intérieure) plutôt que de laisser
   la colonne l'étirer. Pour un schéma vraiment plus grand il faudrait un
   fichier source plus grand, pas un agrandissement de celui-ci. */
.schema-aile img{width:100%;max-width:451px;height:auto;display:block;margin:0 auto;}
.schema-aile figcaption{font-size:.92rem;color:#E8ECEF;text-align:center;
  margin-top:9px;line-height:1.45;}
@media (min-width:700px){
  .zone-aide{grid-template-columns:1fr minmax(min(300px,44%),475px);gap:24px;}
}
@media (max-width:699px){
  .zone-aide{grid-template-columns:1fr;}
  .schema-aile{order:-1;}
}

.devis-pied{margin-top:22px;padding-top:20px;border-top:1px solid var(--trait);}
.apercu{background:var(--fond-2);border-radius:var(--r);padding:13px 15px;font-size:.9rem;
  color:var(--encre-2);white-space:pre-wrap;margin-bottom:16px;border-left:3px solid var(--wa);
  max-height:190px;overflow:auto;}
.apercu strong{color:var(--encre);}
.rappel{font-size:.89rem;color:var(--encre-3);margin-top:12px;}

/* ---------- étapes ---------- */
.etapes{display:grid;gap:20px;counter-reset:e;}
.etape{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;}
.etape .num{width:44px;height:44px;border-radius:50%;background:var(--rouge);color:#fff;
  display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:1.15rem;}
.etape h3{font-size:1.1rem;margin-bottom:4px;}
.etape p{color:var(--encre-2);font-size:.97rem;}

/* ---------- avant/après ---------- */
.galerie{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.cas{background:#fff;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;}

/* --- Cadre du visuel ---
   `contain` plutôt que `cover` : les photos d'atelier sont souvent prises à la
   verticale, et un recadrage en 4/3 leur coupait le haut et le bas — donc
   régulièrement la zone réparée elle-même. Ici l'image entière reste visible,
   posée sur un fond sombre neutre qui tient le rôle du passe-partout.
   Le ratio du cadre reste constant, la grille garde son alignement. */
.cas-visuel,.article-carte .cas-visuel{
  display:block;position:relative;line-height:0;
  aspect-ratio:4/3;background:#1d242b;overflow:hidden;}
.cas-visuel img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;display:block;}

/* --- Avant / après au survol ---
   Les deux photos sont superposées ; la seconde apparaît au survol et au focus
   clavier, de sorte que l'effet ne soit pas réservé à la souris. La carte reste
   parfaitement lisible sans JavaScript et sans l'effet. */
.cas-visuel{display:block;position:relative;line-height:0;}
/* Balayage plutôt que fondu : l'après se dévoile de gauche à droite, comme si
   on tirait un rideau. La comparaison est plus lisible qu'un fondu, où les deux
   images se superposent en bouillie pendant la transition. */
.cas-visuel--duo .cas-apres{
  position:absolute;inset:0;height:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s cubic-bezier(.4,0,.2,1);}
.cas-visuel--duo:hover .cas-apres,
.cas-visuel--duo:focus-within .cas-apres,
.cas:hover .cas-visuel--duo .cas-apres,
.article-carte:hover .cas-visuel--duo .cas-apres{clip-path:inset(0 0 0 0);}

/* Le trait lumineux qui accompagne le bord du balayage. */
.cas-visuel--duo{--kr-trait:3px;}
.cas-visuel--duo::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:var(--kr-trait);z-index:1;
  background:var(--wa);opacity:0;pointer-events:none;
  transition:left .55s cubic-bezier(.4,0,.2,1),opacity .18s;}
.cas-visuel--duo:hover::after,
.cas:hover .cas-visuel--duo::after,
.article-carte:hover .cas-visuel--duo::after{opacity:1;left:calc(100% - var(--kr-trait));}

/* Même principe que sur le hero : les deux mots empilés, basculement en opacité
   et non en `display`, pour que l'animation puisse les faire alterner. */
.cas-etiquette{
  position:absolute;left:10px;bottom:10px;z-index:2;display:inline-grid;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;line-height:1.3;
  background:rgba(26,32,38,.82);color:#fff;backdrop-filter:blur(2px);
  transition:background .22s,color .22s;}
.cas-etiquette>span{grid-area:1/1;transition:opacity .14s linear;}
.cas-etiquette .et-avant{opacity:1;transition-delay:.14s;}
.cas-etiquette .et-apres{opacity:0;transition-delay:0s;}
.cas-visuel--duo:hover .cas-etiquette,
.cas:hover .cas-visuel--duo .cas-etiquette,
.article-carte:hover .cas-visuel--duo .cas-etiquette{background:var(--wa);color:#0B3D26;}
.cas-visuel--duo:hover .et-avant,
.cas:hover .cas-visuel--duo .et-avant,
.article-carte:hover .cas-visuel--duo .et-avant{opacity:0;transition-delay:0s;}
.cas-visuel--duo:hover .et-apres,
.cas:hover .cas-visuel--duo .et-apres,
.article-carte:hover .cas-visuel--duo .et-apres{opacity:1;transition-delay:.14s;}

/* Sans souris, le survol n'existe pas : tout l'effet se rejoue en boucle. Les
   cinq animations partagent la même durée et les mêmes pourcentages, et aucune
   ne porte d'`animation-delay` : les cartes battent donc à l'unisson.
   Les sélecteurs visent bien `.cas-visuel--duo` — la classe `--duo` est portée
   par le lien du visuel, jamais par la carte qui l'entoure. (Le harnais inline
   cette feuille dans le rendu qu'il compte : pas de balise en commentaire.) */
@media (hover:none){
  .cas-visuel--duo .cas-apres    {animation:kr-bascule   7s ease-in-out infinite;}
  .cas-visuel--duo::after        {animation:kr-trait     7s ease-in-out infinite;}
  .cas-visuel--duo .cas-etiquette{animation:kr-etiquette 7s ease-in-out infinite;}
  .cas-visuel--duo .et-avant     {animation:kr-mot-avant 7s ease-in-out infinite;}
  .cas-visuel--duo .et-apres     {animation:kr-mot-apres 7s ease-in-out infinite;}
}

/* --- Une seule horloge pour tout l'effet, cadres et cartes confondus ---
     38 → 55 %  la photo « après » se dévoile de gauche à droite
     44 → 48 %  la couleur et le mot basculent, soit à mi-balayage
     90 → 100 % le rideau se referme et le mot revient à « Avant »
   Le relais des mots est décalé de deux points dans chaque sens : « Avant »
   s'efface entre 44 et 46 %, « Après » n'apparaît qu'entre 46 et 48 %. Les deux
   ne sont donc jamais visibles en même temps — un fondu croisé donnerait deux
   mots superposés sur le même pixel, illisibles.
   Toucher à l'un de ces nombres oblige à toucher aux quatre blocs. */
@keyframes kr-bascule{
  0%,38%{clip-path:inset(0 100% 0 0);}
  55%,90%{clip-path:inset(0 0 0 0);}
  100%{clip-path:inset(0 100% 0 0);}
}
@keyframes kr-trait{
  0%,36%{left:0;opacity:0;}
  38%{left:0;opacity:1;}
  55%{left:calc(100% - var(--kr-trait));opacity:1;}
  58%,88%{left:calc(100% - var(--kr-trait));opacity:0;}
  90%{left:calc(100% - var(--kr-trait));opacity:1;}
  99%{left:0;opacity:1;}
  100%{left:0;opacity:0;}
}
@keyframes kr-etiquette{
  0%,44%{background:rgba(26,32,38,.82);color:#fff;}
  48%,91%{background:var(--wa);color:#0B3D26;}
  95%,100%{background:rgba(26,32,38,.82);color:#fff;}
}
@keyframes kr-mot-avant{
  0%,44%{opacity:1;} 46%,93%{opacity:0;} 95%,100%{opacity:1;}
}
@keyframes kr-mot-apres{
  0%,46%{opacity:0;} 48%,91%{opacity:1;} 93%,100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .cas-visuel--duo .cas-apres,.cas-visuel--duo::after,
  .cas-visuel--duo .cas-etiquette,
  .cas-visuel--duo .et-avant,.cas-visuel--duo .et-apres{animation:none;transition:none;}
}
.cas .txt{padding:13px 15px;}
.cas h4{font-size:.98rem;margin-bottom:3px;}
.cas p{font-size:.9rem;color:var(--encre-2);}

/* ---------- tarifs ---------- */
.tarifs-grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.bloc-tarif{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:20px;}
.bloc-tarif h3{font-size:1.08rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--rouge);}
.ligne{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--fond-3);font-size:.95rem;}
.ligne:last-child{border-bottom:0;}
.ligne .prix{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.note-tarif{margin-top:20px;padding:14px 16px;background:var(--rouge-pale);border-left:3px solid var(--rouge);
  border-radius:var(--r);font-size:.92rem;color:var(--encre-2);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--trait);max-width:80ch;}
.faq-item{border-bottom:1px solid var(--trait);}
.faq-item summary{
  cursor:pointer;padding:16px 34px 16px 0;font-weight:700;font-size:1.02rem;
  list-style:none;position:relative;line-height:1.35;}
.faq-item summary::-webkit-details-marker{display:none;}
/* Chevron dessiné en CSS : pas d'image, et il tourne à l'ouverture. */
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--rouge);border-bottom:2px solid var(--rouge);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-item summary:hover{color:var(--rouge);}
.faq-reponse{padding:0 34px 18px 0;color:var(--encre-2);}
.faq-reponse p{margin:0;max-width:72ch;}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none;}}

/* ---------- prestations ---------- */
.presta{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.presta-carte{border:1px solid var(--trait);border-radius:var(--r);padding:20px;background:#fff;}
.presta-carte h3{font-size:1.05rem;margin-bottom:8px;}
.presta-carte ul{list-style:none;font-size:.93rem;color:var(--encre-2);}
.presta-carte li{padding:4px 0 4px 18px;position:relative;}
.presta-carte li::before{content:"—";position:absolute;left:0;color:var(--rouge);}

/* ---------- envoi ---------- */
.envoi{display:grid;gap:26px;grid-template-columns:1fr;}
.envoi ul{list-style:none;}
.envoi li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid rgba(255,255,255,.12);}
.envoi li::before{content:"✓";position:absolute;left:0;color:var(--wa);font-weight:700;}
.envoi li:last-child{border-bottom:0;}
.encadre-envoi{background:rgba(255,255,255,.06);border-radius:var(--r);padding:20px;
  border:1px solid rgba(255,255,255,.14);}
.encadre-envoi h3{font-size:1.05rem;margin-bottom:10px;}
.encadre-envoi p{font-size:.94rem;color:#B8C4CC;}

/* ---------- contact ---------- */
.contact-grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.contact-carte{border:1px solid var(--trait);border-radius:var(--r);padding:20px;background:#fff;}
.contact-carte h3{font-size:1rem;margin-bottom:8px;}
.contact-carte p,.contact-carte a{font-size:.95rem;color:var(--encre-2);text-decoration:none;}
.contact-carte a:hover{color:var(--rouge);}

/* ---------- pied ---------- */
footer{background:var(--encre);color:#B8C4CC;padding:38px 0 26px;font-size:.9rem;}
footer h4{color:#fff;font-size:.95rem;margin-bottom:10px;}
.pied-grille{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));margin-bottom:26px;}
footer a{color:#B8C4CC;text-decoration:none;}
footer a:hover{color:#fff;}
footer ul{list-style:none;}
footer li{padding:3px 0;}
/* Bande du badge d'avis. Le pied est sombre et le widget arrive avec ses
   propres couleurs, claires : on lui laisse sa respiration plutôt que de tenter
   de le reteinter, ce qui casserait ses étoiles. */
.pied-avis{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 4px;
  margin-bottom:22px;display:flex;justify-content:center;}
.pied-avis>*{max-width:100%;}

.pied-bas{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.9rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* ---------- barre d'action mobile ---------- */
.barre-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--trait);padding:9px 10px;
  gap:8px;box-shadow:0 -2px 12px rgba(0,0,0,.09);}
.barre-mobile a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 6px;border-radius:var(--r);font-weight:700;text-decoration:none;
  /* Le libellé doit tenir sur une ligne jusqu'aux plus petits téléphones ;
     min-width:0 autorise le rétrécissement sous la largeur du contenu. */
  font-size:clamp(.8rem,3.2vw,.94rem);white-space:nowrap;min-width:0;overflow:hidden;}
.barre-mobile .wa{background:var(--wa);color:#0B3D26;flex:1.5;}
.barre-mobile .tel{background:var(--fond-2);color:var(--encre);border:1px solid var(--trait);}
.barre-mobile svg{width:18px;height:18px;flex:none;}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .hero-grille{grid-template-columns:1.15fr 1fr;}
  .champs{grid-template-columns:1fr 1fr;}
  .champ.pleine{grid-column:1/-1;}
  .etapes{grid-template-columns:repeat(3,1fr);}
  .envoi{grid-template-columns:1.3fr 1fr;}
}
@media (max-width:759px){
  html{font-size:106.25%;} /* 17 px */
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--trait);padding:8px 20px 16px;}
  nav.ouvert{display:block;}
  nav ul{flex-direction:column;gap:0;align-items:stretch;}
  nav li{border-bottom:1px solid var(--fond-3);}
  nav li:last-child{border-bottom:0;}
  nav a{display:block;padding:13px 0;}
  .burger{display:block;}
  .head{position:relative;}
  .logo img{width:140px;}
  section{padding:38px 0;}
  .hero{padding:30px 0 34px;}
  .preuve{padding-right:16px;margin-right:16px;}
  .preuve b{font-size:1.15rem;}
  /* Boutons pleine largeur seulement sur les vrais petits écrans : entre 560 et
     759 px, la ligne est assez large pour les poser côte à côte. */
  .hero-actions .btn{flex:1 1 auto;}
  .devis{padding:20px 16px;}
  .barre-mobile{display:flex;}
  body{padding-bottom:68px;}
  .topbar .wrap{gap:4px 14px;font-size:.85rem;}
}
@media (max-width:559px){
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ==========================================================================
   Styles requis par WordPress
   Classes générées par l'éditeur, indispensables pour que les anciens
   articles (2011-2020) s'affichent correctement.
   ========================================================================== */
.alignleft{float:left;margin:.4em 1.6em 1em 0;}
.alignright{float:right;margin:.4em 0 1em 1.6em;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignnone{margin:1em 0;}
.wp-caption{max-width:100%;margin-bottom:1.4em;}
.wp-caption img{border-radius:var(--r);}
.wp-caption-text,.wp-block-image figcaption{
  font-size:.89rem;color:var(--encre-3);margin-top:6px;text-align:center;}
.sticky{border-left:3px solid var(--rouge);padding-left:16px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));margin:1.4em 0;}
.gallery-item{margin:0!important;width:auto!important;}
.gallery-icon img{width:100%;border-radius:var(--r);}
.gallery-caption{font-size:.89rem;color:var(--encre-3);}
.wp-block-embed__wrapper{position:relative;}
embed,iframe,object{max-width:100%;}

/* ==========================================================================
   Contenu éditorial — pages et articles
   ========================================================================== */
.contenu{max-width:70ch;}
.contenu > * + *{margin-top:1.15em;}
.contenu h2{font-size:1.5rem;margin-top:1.8em;}
.contenu h3{font-size:1.2rem;margin-top:1.5em;}
.contenu ul,.contenu ol{padding-left:1.3em;}
.contenu li + li{margin-top:.35em;}
.contenu img{border-radius:var(--r);}
.contenu blockquote{border-left:3px solid var(--rouge);padding-left:18px;color:var(--encre-2);font-style:italic;}
.contenu table{width:100%;border-collapse:collapse;font-size:.95rem;}
.contenu th,.contenu td{border:1px solid var(--trait);padding:8px 11px;text-align:left;}
.contenu th{background:var(--fond-2);font-weight:700;}
.contenu code{background:var(--fond-2);padding:2px 5px;border-radius:3px;font-size:.9em;}
.contenu pre{background:var(--fond-2);padding:14px;border-radius:var(--r);overflow-x:auto;}
.contenu .tableau{overflow-x:auto;}

/* ---------- en-tête de page ---------- */
.page-tete{background:var(--fond-2);border-bottom:1px solid var(--trait);padding:34px 0;}
.page-tete h1{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:800;}
.page-tete .meta{font-size:.9rem;color:var(--encre-3);margin-top:8px;}
.fil{font-size:.85rem;color:var(--encre-3);margin-bottom:10px;}
.fil a{color:var(--encre-3);text-decoration:none;}
.fil a:hover{color:var(--rouge);}

/* ---------- liste d'articles ---------- */
.liste-articles{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.article-carte{background:#fff;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;}

.article-carte .txt{padding:16px 18px;display:flex;flex-direction:column;gap:7px;flex:1;}
.article-carte h2{font-size:1.08rem;line-height:1.25;}
.article-carte h2 a{color:var(--encre);text-decoration:none;}
.article-carte h2 a:hover{color:var(--rouge);}
.article-carte .date{font-size:.85rem;color:var(--encre-3);}
.article-carte p{font-size:.93rem;color:var(--encre-2);}
.article-carte .lire{margin-top:auto;font-weight:700;font-size:.9rem;text-decoration:none;}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px;}
.pagination .page-numbers{padding:9px 14px;border:1px solid var(--trait);border-radius:var(--r);
  text-decoration:none;color:var(--encre);font-weight:600;font-size:.93rem;}
.pagination .page-numbers.current{background:var(--rouge);color:#fff;border-color:var(--rouge);}
.pagination .page-numbers:hover:not(.current){border-color:var(--encre);}

/* ---------- recherche ---------- */
.form-recherche{display:flex;gap:8px;max-width:440px;}
.form-recherche input[type=search]{flex:1;padding:11px 13px;border:1px solid var(--trait);
  border-radius:var(--r);font-family:inherit;font-size:1rem;}
.form-recherche input[type=search]:focus{border-color:var(--rouge);outline:none;}

/* ---------- 404 ---------- */
.err{text-align:center;padding:60px 0;}
.err .code{font-family:"Bricolage Grotesque",sans-serif;font-size:4.5rem;font-weight:800;
  color:var(--rouge);line-height:1;}

/* ---------- navigation entre articles ---------- */
.nav-articles{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--trait);font-size:.93rem;}
.nav-articles a{font-weight:600;text-decoration:none;}