/*
Theme Name: Tout en Bricolage
Theme URI: https://www.toutenbricolage.fr/
Author: Tout en Bricolage
Description: Theme sur mesure du magazine Tout en Bricolage. Atelier clair, encre graphite et jaune de signalisation, premier ecran organise par symptome plutot que par date de publication.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: tout-en-bricolage
*/

/* =========================================================
   JETONS
   Direction : atelier clair. Fond de beton, encre graphite, un
   seul accent, le jaune de signalisation. La profondeur vient
   des ombres portees et des photographies.

   Le systeme de formes est TOUT VIF : aucun rayon nulle part.
   C est la regle de la signaletique de chantier, et c est ce qui
   separe ce site de tous les autres du parc.

   Contrastes WCAG mesures avant ecriture :
     graphite sur beton ..... 12.93  AAA
     gris sur beton .......... 5.23  AA
     graphite sur platre .... 15.09  AAA
     gris sur platre ......... 6.11  AA
     graphite sur jaune ...... 8.80  AAA
     platre sur graphite .... 15.09  AAA
     jaune sur graphite ...... 8.80  AAA
     platre sur nuit ........ 16.61  AAA

   Le jaune sur fond clair tombe a 1.47 : il ne sert donc JAMAIS
   de couleur de texte sur clair, uniquement en aplat, en repere
   et en filet.
   ========================================================= */
:root {
  --beton:    #E6E5E0;
  --platre:   #F7F6F2;
  --graphite: #1E2024;
  --nuit:     #15171A;
  --gris:     #5A5D63;
  --jaune:    #F5B301;
  --jaune2:   #D89A00;
  --bord:     #D2D1CA;
  --bord-sombre: rgba(247, 246, 242, .16);

  --ombre-pose:  0 8px 22px rgba(30, 32, 36, .09);
  --ombre-levee: 0 16px 40px rgba(30, 32, 36, .15);
  --ombre-forte: 0 26px 58px rgba(30, 32, 36, .26);

  --titre: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Asap', 'Segoe UI', system-ui, sans-serif;

  /* Gamme fermee : dix pas, aucune taille hors gamme. */
  --t1: 11.5px;
  --t2: 13px;
  --t3: 15px;
  --t4: 17px;
  --t5: 19.5px;
  --t6: 24px;
  --t7: 31px;
  --t8: clamp(30px, 3.4vw, 42px);
  --t9: clamp(38px, 4.6vw, 62px);

  --souffle: clamp(52px, 6vw, 88px);
  --gout: clamp(20px, 3vw, 40px);
}

/* overflow-x: clip et jamais hidden : hidden ferait de html un
   conteneur de defilement et la barre collante remonterait. */
html { max-width: 100%; overflow-x: clip; }
body {
  max-width: 100%;
  margin: 0;
  background: var(--beton);
  background-image:
    radial-gradient(1200px 700px at 78% -6%, rgba(255, 255, 255, .85), transparent 62%),
    radial-gradient(900px 600px at 4% 96%, rgba(30, 32, 36, .07), transparent 60%);
  background-attachment: fixed;
  color: var(--graphite);
  font-family: var(--texte);
  font-size: var(--t4);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* Le grain, sur un pseudo-element fixe et non sur un conteneur qui
   defile : sinon le GPU repeint en continu et le mobile s effondre. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 700; letter-spacing: -.022em; }
p { margin: 0 0 1em; }
button { font-family: inherit; }

.emprise {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gout);
  padding-right: var(--gout);
}

.saut { position: absolute; left: -9999px; top: 0; background: var(--jaune); color: var(--graphite); padding: 10px 16px; z-index: 999; }
.saut:focus { left: 8px; top: 8px; }

.vide { color: var(--gris); }

/* L etiquette de question : aplat graphite, texte jaune. */
.etiquette-q {
  display: inline-block;
  background: var(--graphite);
  color: var(--jaune);
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 14px;
}
/* L etiquette de rubrique : aplat jaune, texte graphite. */
.etiquette {
  display: inline-block;
  background: var(--jaune);
  color: var(--graphite);
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* =========================================================
   BOUTONS
   ========================================================= */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px;
  border: 0;
  background: var(--graphite);
  color: var(--platre);
  font-family: var(--texte);
  font-size: var(--t3);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--ombre-levee);
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.bouton:hover { background: var(--jaune); color: var(--graphite); }
.bouton:active { transform: translateY(1px); }
.bouton-clair { background: var(--jaune); color: var(--graphite); }
.bouton-clair:hover { background: var(--graphite); color: var(--platre); }

/* =========================================================
   ECHAFAUD : la barre de navigation collante
   Toujours opaque, sur toutes les pages, jamais transparente.
   ========================================================= */
.echafaud { position: sticky; top: 0; z-index: 90; background: var(--graphite); color: var(--platre); }
.echafaud-rang { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }

.plaque { display: inline-flex; align-items: center; gap: 12px; }
.plaque-mot { font-family: var(--titre); font-size: var(--t5); font-weight: 700; color: var(--platre); }

.passerelle { display: flex; align-items: center; gap: 30px; }
.passerelle a { font-size: var(--t2); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #B9BBBF; transition: color .18s ease; }
.passerelle a:hover { color: var(--platre); }
.passerelle-contact { background: var(--jaune); color: var(--graphite) !important; padding: 12px 22px; }
.passerelle-contact:hover { background: var(--platre); }
.passerelle-fermer { display: none; }

.trappe { display: none; width: 46px; height: 42px; background: transparent; border: 1px solid var(--bord-sombre); cursor: pointer; padding: 0; }
.trappe span { display: block; width: 20px; height: 2px; background: var(--platre); margin: 4px auto; }

/* =========================================================
   DIAGNOSTIC : l ouverture
   Aucune grande photo derriere du texte : la photo est posee a
   cote, calee sur un aplat jaune decale qui lui donne l assise.
   ========================================================= */
.diagnostic { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 70px; padding-bottom: 40px; }
.diagnostic-h { margin-top: 22px; font-size: var(--t9); line-height: 1.02; }
.diagnostic-h em {
  display: block;
  margin-top: 14px;
  font-family: var(--texte);
  font-style: normal;
  font-size: var(--t5);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris);
}
.diagnostic-chapo { margin-top: 22px; max-width: 46ch; font-size: var(--t4); color: var(--gris); }
.diagnostic .bouton { margin-top: 8px; }
.diagnostic-vue { position: relative; }
.diagnostic-vue img { width: 100%; height: 400px; object-fit: cover; box-shadow: 20px 20px 0 var(--jaune), var(--ombre-forte); }

/* =========================================================
   SYMPTOMES : le routeur de pannes, signature du site
   Huit familles tirees du corpus reel du domaine. Chaque tuile
   renvoie sur la recherche du site.
   ========================================================= */
.symptomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: var(--souffle); }
.symptome {
  position: relative; display: block; overflow: hidden;
  background: var(--platre);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-pose);
  transition: transform .2s ease, box-shadow .2s ease;
}
.symptome:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }
.symptome img { width: 100%; height: 130px; object-fit: cover; }
.symptome-mot { display: block; padding: 15px 16px 18px; }
.symptome-nom { display: block; font-family: var(--titre); font-weight: 700; font-size: var(--t3); line-height: 1.3; }
.symptome-dit { display: block; margin-top: 5px; font-size: var(--t2); color: var(--gris); line-height: 1.4; }
.symptome::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 38px; background: var(--jaune); transition: width .25s ease; }
.symptome:hover::after { width: 100%; }

/* =========================================================
   PANNES : les articles
   Une large en tete, puis un champ de lignes sur deux colonnes.
   Jamais trois cartes egales sur une rangee.
   ========================================================= */
.pannes { padding-bottom: var(--souffle); }
.pannes-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; margin-bottom: 28px; border-bottom: 3px solid var(--graphite); }
.pannes-h { font-size: var(--t7); }
.pannes-compte { font-size: var(--t2); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

.panne-une {
  display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--platre);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-levee);
  margin-bottom: 26px;
  transition: box-shadow .2s ease;
}
.panne-une:hover { box-shadow: var(--ombre-forte); }
.panne-une-vue { display: block; height: 100%; }
.panne-une-vue img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.panne-une-mot { display: block; align-self: center; padding: 38px 40px; }
.panne-une-h { display: block; margin-top: 15px; font-family: var(--titre); font-weight: 700; font-size: var(--t7); line-height: 1.14; letter-spacing: -.022em; }
.panne-une:hover .panne-une-h { color: var(--jaune2); }
.panne-une-chapo { display: block; margin-top: 14px; font-size: var(--t3); color: var(--gris); }
.panne-une-note { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bord); font-size: var(--t2); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }

.panne-champ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panne {
  position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 14px;
  background: var(--platre);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-pose);
  transition: transform .2s ease, box-shadow .2s ease;
}
.panne:hover { transform: translateY(-2px); box-shadow: var(--ombre-levee); }
.panne::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--jaune); transition: width .25s ease; }
.panne:hover::after { width: 100%; }
.panne-sans-vue { grid-template-columns: minmax(0, 1fr); }
.panne-vue img { width: 130px; height: 100px; object-fit: cover; }
.panne-h { display: block; font-family: var(--titre); font-weight: 700; font-size: var(--t4); line-height: 1.26; }
.panne-note { display: block; margin-top: 7px; font-size: var(--t2); color: var(--gris); }

/* =========================================================
   DEPANNEUR : le bloc persona, bande graphite pleine largeur
   ========================================================= */
/* Ce bloc reste CLAIR : le depanneur, la porte de rubrique et le
   pied de page s enchainent, et trois aplats sombres d affilee
   feraient basculer toute la moitie basse du site. */
.depanneur { background: var(--platre); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.depanneur-rang { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 52px; align-items: start; padding-top: 64px; padding-bottom: 64px; }
.depanneur-vue img { width: 300px; height: 380px; object-fit: cover; box-shadow: 18px 18px 0 var(--jaune), var(--ombre-levee); }
.depanneur-nom { display: block; padding-top: 18px; border-top: 5px solid var(--jaune); font-size: var(--t8); width: fit-content; }
.depanneur-role { display: block; margin-top: 10px; margin-bottom: 20px; font-size: var(--t2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.depanneur-mot { max-width: 62ch; font-size: var(--t4); color: var(--gris); }
.depanneur-mot p { margin-bottom: .9em; }
.depanneur-mot ul { margin: 0 0 .9em; padding-left: 20px; }
.depanneur-mot li { margin-bottom: .4em; }
.depanneur-mot strong { color: var(--graphite); font-weight: 700; }

/* =========================================================
   PORTE : l acces a la rubrique
   ========================================================= */
.porte { position: relative; display: block; overflow: hidden; }
.porte-vue { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.porte:hover .porte-vue { transform: scale(1.08); }
.porte-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 23, 26, .95) 8%, rgba(21, 23, 26, .72) 50%, rgba(21, 23, 26, .42) 100%); }
.porte-rang { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-top: clamp(52px, 6vw, 86px); padding-bottom: clamp(52px, 6vw, 86px); color: var(--platre); }
.porte-nom { display: block; font-family: var(--titre); font-weight: 700; font-size: var(--t9); line-height: 1; }
.porte:hover .porte-nom { color: var(--jaune); }
.porte-dit { display: block; margin-top: 14px; max-width: 54ch; font-size: var(--t3); color: #C3C5C8; }
.porte-nb { text-align: right; }
.porte-nb b { display: block; font-family: var(--titre); font-size: var(--t7); color: var(--jaune); }
.porte-nb span { display: block; margin-top: 4px; font-size: var(--t1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #C3C5C8; }

/* =========================================================
   DALLE : le pied de page
   ========================================================= */
.dalle { background: var(--nuit); color: #B4B7BA; border-top: 4px solid var(--jaune); }
.dalle-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 60px); padding-top: 54px; padding-bottom: 38px; }
.dalle-dire p { margin-top: 18px; max-width: 46ch; font-size: var(--t3); }
.dalle-recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; align-content: start; }
.dalle-recent a { display: block; padding-top: 13px; border-top: 1px solid var(--bord-sombre); }
.dalle-date { display: block; font-size: var(--t1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.dalle-titre { display: block; margin-top: 6px; font-family: var(--titre); font-weight: 600; font-size: var(--t3); line-height: 1.32; color: var(--platre); }
.dalle-recent a:hover .dalle-titre { color: var(--jaune); }
.dalle-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 26px; padding-top: 20px; padding-bottom: 34px; border-top: 1px solid var(--bord-sombre); }
.dalle-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dalle-liens a { font-size: var(--t2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dalle-liens a:hover { color: var(--jaune); }
.dalle-droit { font-size: var(--t1); }

/* =========================================================
   REPERAGE : le fil d ariane
   ========================================================= */
.reperage { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-top: 22px; font-size: var(--t1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.reperage a:hover { color: var(--graphite); }
.reperage span[aria-hidden] { color: var(--bord); }

/* =========================================================
   MEMO : l article
   Colonne de lecture unique et centree : le fil d ariane, le
   titre, la photo, le corps et le bloc auteur partagent
   exactement les memes bords. Le conteneur n est pas plafonne a
   une mesure de texte, il est retreci en entier, image comprise,
   donc les blocs de la chaine de contenu gardent toute la
   largeur disponible.
   ========================================================= */
.memo-tete, .memo-vue, .memo-corps, .memo-pied { max-width: 880px; }
.single .reperage, .page .reperage { max-width: 880px; }

.memo-tete { padding-top: 26px; padding-bottom: 28px; }
.memo-h { margin-top: 18px; font-size: var(--t8); line-height: 1.08; }
.memo-signe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 20px; padding-top: 14px; border-top: 3px solid var(--graphite); font-size: var(--t2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.memo-etoiles { display: inline-flex; align-items: center; }

.memo-vue { margin-top: 0; margin-bottom: 0; }
.memo-vue img { width: 100%; box-shadow: var(--ombre-forte); }

.memo-corps { padding-top: 40px; font-size: var(--t4); line-height: 1.74; }
.memo-corps h2 { margin: 1.7em 0 .45em; font-size: var(--t7); padding-top: 14px; border-top: 1px solid var(--bord); }
.memo-corps h3 { margin: 1.4em 0 .4em; font-size: var(--t6); }
.memo-corps a { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.memo-corps a:hover { background: var(--jaune); }
.memo-corps ul, .memo-corps ol { padding-left: 22px; }
.memo-corps li { margin-bottom: .45em; }
.memo-corps img { margin: 1.5em 0; box-shadow: var(--ombre-pose); }
.memo-corps table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--t3); background: var(--platre); }
.memo-corps th, .memo-corps td { padding: 13px 15px; border-bottom: 1px solid var(--bord); text-align: left; }
.memo-corps th { background: var(--graphite); color: var(--platre); font-family: var(--texte); font-size: var(--t1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.memo-corps blockquote {
  margin: 1.8em 0; padding: 24px 28px;
  background: var(--platre);
  border-left: 5px solid var(--jaune);
  box-shadow: var(--ombre-pose);
  font-family: var(--titre);
  font-size: var(--t6);
  font-weight: 600;
  line-height: 1.34;
}
.memo-corps blockquote p { margin: 0; }

.teb-aussi { display: block; margin: 1.9em 0; padding: 22px 26px; background: var(--platre); border-left: 5px solid var(--jaune); box-shadow: var(--ombre-pose); }
.teb-aussi b { display: block; margin-bottom: 8px; font-family: var(--texte); font-size: var(--t1); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.teb-aussi a { font-family: var(--titre); font-size: var(--t5); font-weight: 700; line-height: 1.24; color: var(--graphite) !important; text-decoration: none !important; background: none !important; }
.teb-aussi a:hover { color: var(--jaune2) !important; }

/* =========================================================
   PICTOGRAMMES DES BLOCS DE LA CHAINE DE CONTENU
   Le prefixe des classes change a chaque version de la chaine
   et d un site a l autre : les selecteurs portent donc sur la
   FIN du nom de classe, jamais sur un prefixe nomme en dur.
   Ils sont qualifies par .memo-corps pour ne jamais attraper un
   element de navigation du theme.
   Le picto est centre verticalement sur le point a savoir : la
   chaine pose un padding vertical sur ses li, un top fixe ferait
   flotter l icone au-dessus du texte.
   ========================================================= */
.memo-corps [class$="-key-top"] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }

.memo-corps [class$="-key"] ul { padding-left: 0; }
.memo-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.memo-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--jaune); opacity: .38;
}
.memo-corps [class$="-key"] li::after {
  content: ''; position: absolute; left: 6.5px; top: 50%; margin-top: -5px;
  width: 5px; height: 9px;
  border: 0; border-right: 2px solid var(--graphite); border-bottom: 2px solid var(--graphite);
  transform: rotate(45deg);
}

.memo-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.memo-corps [class$="-badge"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.memo-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; }
.memo-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.memo-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--graphite); opacity: .9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.memo-corps [class$="-foot"] span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
.memo-corps [class$="-foot"] span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}
.memo-corps [class$="-foot"] span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}

.memo-corps #ez-toc-container { background: var(--platre); border: 1px solid var(--bord); border-left: 5px solid var(--jaune); border-radius: 0; box-shadow: var(--ombre-pose); }

/* =========================================================
   TAMPON ET A COTE
   ========================================================= */
.tampon { display: flex; align-items: flex-start; gap: 22px; margin-top: 52px; padding: 26px 28px; background: var(--platre); border: 1px solid var(--bord); border-left: 5px solid var(--jaune); box-shadow: var(--ombre-pose); }
.tampon-vue { width: 78px; height: 78px; object-fit: cover; flex: 0 0 auto; }
.tampon-nom { display: block; font-family: var(--titre); font-weight: 700; font-size: var(--t6); }
.tampon-role { display: block; margin-top: 3px; font-size: var(--t1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.tampon-mot p { margin: 12px 0 0; font-size: var(--t3); color: var(--gris); }

.a-cote { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.a-cote-h { font-size: var(--t7); padding-bottom: 12px; margin-bottom: 26px; border-bottom: 3px solid var(--graphite); }
.a-cote-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.a-cote-item { position: relative; display: block; padding: 14px; background: var(--platre); border: 1px solid var(--bord); box-shadow: var(--ombre-pose); transition: transform .2s ease, box-shadow .2s ease; }
.a-cote-item:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }
.a-cote-item::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--jaune); transition: width .25s ease; }
.a-cote-item:hover::after { width: 100%; }
.a-cote-vue img { width: 100%; height: 160px; object-fit: cover; }
.a-cote-mot { display: block; padding-top: 16px; }
.a-cote-titre { font-family: var(--titre); font-weight: 700; font-size: var(--t4); line-height: 1.26; }
.a-cote-note { display: block; margin-top: 8px; font-size: var(--t1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* =========================================================
   LOT : la rubrique
   ========================================================= */
.lot-tete { position: relative; overflow: hidden; background: var(--nuit); }
.lot-vue { position: absolute; inset: 0; background-size: cover; background-position: center; }
.lot-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 23, 26, .80) 0%, rgba(21, 23, 26, .94) 100%); }
.lot-mot { position: relative; z-index: 2; padding-top: clamp(50px, 6vw, 84px); padding-bottom: clamp(42px, 5vw, 70px); color: var(--platre); }
.lot-h { font-size: var(--t9); line-height: 1.02; }
.lot-compte { display: block; margin-top: 14px; font-size: var(--t3); font-weight: 700; color: var(--jaune); }
.lot-desc { margin-top: 18px; max-width: 66ch; }
.lot-desc p { margin-bottom: .6em; font-size: var(--t4); color: #C3C5C8; }
.lot-liste { padding-top: var(--souffle); }
.lot-seo { padding-top: 36px; padding-bottom: var(--souffle); }
.lot-seo h2 { font-size: var(--t7); padding-top: 18px; border-top: 3px solid var(--graphite); margin-bottom: 16px; }
.lot-seo p { max-width: 78ch; color: var(--gris); }

/* =========================================================
   CLASSEUR : les pages statiques
   ========================================================= */
.classeur { padding-bottom: var(--souffle); max-width: 880px; }
.classeur-tete { padding-top: 26px; padding-bottom: 24px; margin-bottom: 34px; border-bottom: 3px solid var(--graphite); }
.classeur-tete h1 { font-size: var(--t8); }
.classeur-corps { font-size: var(--t4); }
.classeur-corps h2 { margin: 1.8em 0 .45em; font-size: var(--t6); }
.classeur-corps a { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.index-plan { margin-bottom: 40px; }
.index-plan h2 { font-size: var(--t6); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--bord); }
.index-plan-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.index-plan-liste li { margin-bottom: 9px; break-inside: avoid; font-size: var(--t3); }
.index-plan-liste a { color: var(--gris); }
.index-plan-liste a:hover { color: var(--graphite); }

.hors-service { padding-top: 56px; padding-bottom: var(--souffle); }
.hors-service h1 { font-size: var(--t8); }
.hors-service p { margin-top: 18px; max-width: 60ch; color: var(--gris); }
.hors-service-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* =========================================================
   DEVIS : la page contact
   ========================================================= */
.echange { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 3.6vw, 54px); align-items: start; }
.echange-mot h2 { font-size: var(--t6); margin-bottom: 10px; }
.echange-mot p { color: var(--gris); max-width: 46ch; font-size: var(--t3); }
.echange-mot a { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; }
.echange-bloc { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--bord); }

.devis { padding: clamp(24px, 3vw, 36px); background: var(--platre); border: 1px solid var(--bord); border-top: 5px solid var(--jaune); box-shadow: var(--ombre-levee); }
.devis .wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.devis .wpcf7-form br { display: none; }
.devis input[type="text"], .devis input[type="email"], .devis textarea {
  width: 100%; padding: 13px 15px;
  background: #FFFFFF;
  border: 1px solid var(--graphite);
  font-family: var(--texte); font-size: var(--t3); color: var(--graphite);
}
.devis input::placeholder, .devis textarea::placeholder { color: var(--gris); }
.devis input:focus, .devis textarea:focus { outline: 3px solid var(--jaune); outline-offset: 0; }
.devis textarea { min-height: 168px; resize: vertical; }
.devis input.wpcf7-submit {
  width: 100%; padding: 16px 24px;
  background: var(--graphite); border: 0;
  font-family: var(--texte); font-size: var(--t3); font-weight: 700;
  color: var(--platre); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.devis input.wpcf7-submit:hover { background: var(--jaune); color: var(--graphite); }
.devis .wpcf7-not-valid-tip { color: #A3121A; font-size: var(--t1); }
.devis .wpcf7-response-output { margin: 14px 0 0 !important; padding: 12px 15px !important; font-size: var(--t2); }

/* =========================================================
   REVELATIONS
   ========================================================= */
.leve { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1); }
.leve.est-la { opacity: 1; transform: none; }

/* =========================================================
   PALIERS
   ========================================================= */
@media (max-width: 1080px) {
  .symptomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-cote-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .diagnostic { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; }
  .diagnostic-vue img { height: clamp(260px, 48vw, 380px); box-shadow: 14px 14px 0 var(--jaune), var(--ombre-levee); }
  .symptomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panne-une { grid-template-columns: minmax(0, 1fr); }
  .panne-une-vue img { min-height: 220px; max-height: 300px; }
  .panne-champ { grid-template-columns: minmax(0, 1fr); }
  .depanneur-rang { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .depanneur-vue img { width: 100%; max-width: 300px; height: 340px; }
  .porte-rang { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .porte-nb { text-align: left; margin-top: 18px; }
  .dalle-haut { grid-template-columns: minmax(0, 1fr); }
  .echange { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .trappe { display: block; }
  .passerelle {
    position: fixed; inset: 0; z-index: 200;
    display: none; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; padding: 32px var(--gout);
    background: var(--graphite);
  }
  .passerelle.est-ouverte { display: flex; }
  .passerelle a {
    width: 100%; padding: 18px 0;
    border-bottom: 1px solid var(--bord-sombre);
    font-family: var(--titre); font-size: var(--t6); font-weight: 700;
    letter-spacing: 0; text-transform: none; color: var(--platre) !important;
  }
  .passerelle-contact {
    width: 100%; margin-top: 18px; padding: 16px 22px !important;
    border-bottom: 0 !important; text-align: center;
    color: var(--graphite) !important; font-family: var(--texte) !important; font-size: var(--t3) !important;
  }
  .passerelle-fermer {
    display: block; position: absolute; top: 14px; right: var(--gout);
    width: 46px; height: 46px;
    background: transparent; border: 1px solid var(--bord-sombre);
    font-size: 22px; line-height: 1; color: var(--platre); cursor: pointer;
  }

  .symptomes { grid-template-columns: minmax(0, 1fr); }
  .a-cote-liste { grid-template-columns: minmax(0, 1fr); }
  .index-plan-liste { columns: 1; }
  .tampon { flex-direction: column; }
  .dalle-recent { grid-template-columns: minmax(0, 1fr); }
  .pannes-tete { flex-direction: column; align-items: flex-start; gap: 8px; }
  .panne { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .panne-vue img { width: 104px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .leve { opacity: 1; transform: none; }
  .porte-vue { transform: none !important; }
}

/* L echafaud se pose une fois la page defilee : la sentinelle du
   script ajoute .est-pose. */
.echafaud.est-pose { box-shadow: 0 6px 24px rgba(30, 32, 36, .30); }

/* Coordonnees de l editeur, servies en image (mentions legales) */
.classeur-fiche { display: block; margin-top: 1rem; margin-bottom: 1.25rem; }
.classeur-fiche img { display: block; max-width: 100%; height: auto; }