/*
Theme Name: DEKUWAY
Theme URI: https://dekuway.com
Author: DEKUWAY
Description: Theme bloc sur mesure pour DEKUWAY - construction, immobilier et accompagnement de projets au Senegal. Concu a partir d'une maquette HTML, converti en blocs natifs : aucun bloc HTML brut, tout est editable dans Gutenberg.
Version: 2026.09.24.2029
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dekuway
Tags: full-site-editing, block-patterns, custom-colors, custom-menu
*/
/* ==========================================================================
   DEKUWAY — feuille de style de la maquette
   Registre relevé sur la référence (template Nesto) ; couleurs imposées par
   l'identité DEKUWAY (noir, blanc, orange), sur consigne explicite du client.
   Échelle de dessin : 1440 px.
   ========================================================================== */

/* DM Sans — la famille relevée sur hostinger.com (corps et titres, variable
   300-700, aucune italique). Géométrique sans-serif : elle reste dans la
   classe typographique relevée sur la référence Nesto. */
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* couleurs — noir et orange relevés au pixel sur le logo fourni */
  --noir:        #000000;
  --noir-doux:   #121214;
  --orange:      #ff9600;
  --orange-mat:  #e58600;
  --blanc:       #ffffff;
  --bande:       #f4f4f5;   /* équivalent neutre du #f3f5f7 de la référence */
  --texte:       #000000;
  --texte-doux:  #6b6b70;
  --texte-tres-doux: #97979e;
  --ligne:       #e6e6e9;
  --ligne-sombre: rgba(255, 255, 255, .14);

  /* géométrie — rayons relevés sur la référence puis ramenés à 1440 px */
  --r-hero:  28px;
  --r-carte: 20px;
  --r-photo: 16px;
  --r-pill:  999px;

  --conteneur: 1264px;
  --gouttiere: 24px;
  --marge-hero: 16px;      /* encart de la carte hero, relevé sur la référence */
  --hauteur-barre: 142px;  /* hauteur réelle de la barre, réservée dans le hero */

  --t-h1-page: clamp(32px, 4.4vw, 64px);  /* pages internes : le hero pèse moins que l'accueil */

  /* mouvement — un vocabulaire, pas une collection d'effets.
     Registre voulu : architectural. Les choses arrivent en place et se
     verrouillent ; rien ne rebondit, rien ne surgit. */
  --sortie: cubic-bezier(.16, 1, .3, 1);    /* décélération franche : la mise en place */
  --doux:   cubic-bezier(.22, 1, .36, 1);
  --t-rapide: .38s;
  --t-moyen:  .72s;
  --t-ample:  1.05s;
  --pas: 90ms;                              /* écart entre deux éléments d'une série */

  /* échelle typographique relevée (hauteurs de capitale mesurées) */
  --t-h1:        clamp(36px, 6.1vw, 88px);   /* hauteur de capitale relevée sur la référence */
  --t-h2:        clamp(28px, 3.5vw, 50px);
  --t-h2-edito:  clamp(30px, 4.3vw, 62px);
  --t-h3:        clamp(19px, 1.6vw, 23px);
  --t-corps:     17px;
  --t-petit:     14px;
  --t-mini:      12px;
}

/* ---------- socle ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
  /* un titre ne se coupe jamais au milieu d'un mot */
  hyphens: none;
  text-wrap: balance;
}

p { margin: 0; }

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   ICÔNES — masques CSS, jamais de SVG dans le contenu
   --------------------------------------------------------------------------
   Un SVG inline n'est pas un bloc natif et ne porte aucune information
   éditable : il n'a rien à faire dans le contenu d'une page. Chaque icône est
   donc un pseudo-élément masqué, piloté par une classe. Le client peut
   changer le texte sans risquer d'effacer l'icône, et l'éditeur ne voit
   jamais de balisage qu'il jugerait invalide.
   ========================================================================== */

.ico::before,
.ico::after { -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }

:root {
  --i-fleche:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-check:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --i-maison:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3E%3C/svg%3E");
  --i-plan:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 9h16M9 9v11'/%3E%3C/svg%3E");
  --i-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.4 8.3-8 9-4.6-.7-8-4-8-9V7z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-outil:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5 5L4 17v3h3l5.7-5.7a4 4 0 0 1 5-5z'/%3E%3C/svg%3E");
  --i-epingle:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-mail:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
  --i-tel:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1.1 1A16 16 0 0 1 4 5.1 1 1 0 0 1 5 4z'/%3E%3C/svg%3E");
  --i-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.8c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.2-2.8c-.1-.2 0-.4.1-.5l.4-.5.2-.4v-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.7.3-.2.2-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.2.7 3 .6.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1z'/%3E%3C/svg%3E");
  --i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 9h3V6h-3c-2 0-3.5 1.6-3.5 3.5V12H8v3h2.5v7h3v-7H16l.5-3h-3v-2c0-.6.4-1 1-1z'/%3E%3C/svg%3E");
  --i-instagram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --i-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.9 8H4v12h2.9V8zM5.4 3.5a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zM20 13.4c0-3.2-1.7-4.7-4-4.7-1.8 0-2.6 1-3.1 1.7V8H10v12h2.9v-6.6c0-1.4.9-2.1 1.9-2.1s1.7.6 1.7 2.1V20H20v-6.6z'/%3E%3C/svg%3E");
  --i-burger:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");

  /* La flèche des pastilles est une IMAGE de fond, pas un masque : le cercle
     occupe déjà le fond de l'élément. Sa couleur est donc figée dans la
     donnée — d'où une variante par contexte. */
  --i-fleche-or:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9600' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-fleche-noir:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-fleche-blanc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Mêmes icônes en orange : les ronds de coordonnées sont un cercle noir
     avec l'icône par-dessus, donc une image de fond et non un masque. */
  --i-epingle-or:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-mail-or:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
  --i-tel-or:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1.1 1A16 16 0 0 1 4 5.1 1 1 0 0 1 5 4z'/%3E%3C/svg%3E");
  --i-whatsapp-or: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff9600'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.8c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.2-2.8c-.1-.2 0-.4.1-.5l.4-.5.2-.4v-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.7.3-.2.2-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.2.7 3 .6.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1z'/%3E%3C/svg%3E");
}

/* fabrique d'icône : une classe pose la forme, la couleur vient du contexte */
.carte-meta::before,
.suivi-liste li::before,
.reseaux a[class*="res--"]::before,
.rond-icone::before,
.burger::before {
  content: '';
  display: block;
  flex: none;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

/* ---------- composants transverses ---------- */

/* core/buttons est un conteneur flex chez WordPress. La maquette doit l'être
   aussi : en flux simple, son <div> conserve l'espace sous la ligne de base
   de son enfant inline-block et décale de 5 px ce qui est centré à côté —
   écart relevé par la porte 4, invisible à l'œil. */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; }
/* Bouton pastille + pastille de flèche à droite : le composant signature de
   la référence.
   La flèche est un ::after, pas un <span> : `core/button` ne sérialise aucun
   enfant, et la classe passée au bloc atterrit sur le CONTENEUR
   `div.wp-block-button`, pas sur le lien. On écrit donc les deux sélecteurs —
   celui de la maquette et celui du bloc — pour un rendu identique au pixel. */

.bouton,
.wp-block-button.bouton > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 9px 9px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--noir);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 34px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.bouton:hover,
.wp-block-button.bouton > .wp-block-button__link:hover { background: var(--orange-mat); transform: translateY(-1px); }

/* la pastille : cercle en couleur de fond, flèche en image de fond par-dessus */
.bouton::after,
.wp-block-button.bouton > .wp-block-button__link::after {
  content: '';
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background-color: var(--noir);
  background-image: var(--i-fleche-or);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform .32s var(--sortie);
}
.bouton:hover::after,
.wp-block-button.bouton > .wp-block-button__link:hover::after { transform: scale(1.07) translateX(2px); }

/* neutraliser le conteneur du bloc, sinon il hérite des règles de la maquette
   et double la pastille comme la flèche */
.wp-block-button.bouton {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.wp-block-button.bouton::after { content: none; }

.bouton--sombre,
.wp-block-button.bouton--sombre > .wp-block-button__link { background: var(--noir); color: var(--blanc); }
.bouton--sombre:hover,
.wp-block-button.bouton--sombre > .wp-block-button__link:hover { background: #26262a; }
.bouton--sombre::after,
.wp-block-button.bouton--sombre > .wp-block-button__link::after {
  background-color: var(--orange);
  background-image: var(--i-fleche-noir);
}

.bouton--clair,
.wp-block-button.bouton--clair > .wp-block-button__link { background: var(--blanc); color: var(--noir); }
.bouton--clair:hover,
.wp-block-button.bouton--clair > .wp-block-button__link:hover { background: #f0f0f2; }
.bouton--clair::after,
.wp-block-button.bouton--clair > .wp-block-button__link::after {
  background-color: var(--noir);
  background-image: var(--i-fleche-blanc);
}

.bouton--fantome,
.wp-block-button.bouton--fantome > .wp-block-button__link {
  background: transparent;
  color: var(--noir);
  border: 1px solid var(--ligne);
  padding: 9px 9px 9px 22px;
  line-height: 30px;
}
.bouton--fantome:hover,
.wp-block-button.bouton--fantome > .wp-block-button__link:hover { background: #fafafa; }
.bouton--fantome::after,
.wp-block-button.bouton--fantome > .wp-block-button__link::after {
  width: 30px; height: 30px;
  background-color: var(--noir);
  background-image: var(--i-fleche-blanc);
  background-size: 13px 13px;
}

/* en-tête de section centré — l'alignement dominant de la référence */
.entete-section { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.entete-section h2 { font-size: var(--t-h2); }
.entete-section p {
  margin-top: 16px;
  color: var(--texte-doux);
  font-size: var(--t-corps);
  line-height: 1.55;
}

.surtitre {
  /* Le surtitre était un <span> inline-block ; aucun bloc natif n'est un
     span, il devient donc un paragraphe. Dans sa boîte de ligne, l'ancien
     span produisait un écart effectif de 23 px sous lui — mesuré, pas
     estimé. La version bloc le reproduit exactement, sinon la section gagne
     17 px et toute la page glisse. */
  display: block;
  margin: 0 0 23px;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* jeu de pastilles de filtre — les variantes vivent dans la page (règle 7) */
.filtres {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 38px;
}
.filtre {
  padding: 8px 18px;
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
  background: var(--blanc);
  color: var(--texte-doux);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.filtre:hover { border-color: #c9c9cf; color: var(--noir); }
.filtre.actif { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

/* ==========================================================================
   1 · HERO — carte arrondie encartée (découpe relevée sur la référence)
   ========================================================================== */

.hero {
  position: relative;
  margin: var(--marge-hero);
  border-radius: var(--r-hero);
  overflow: hidden;
  min-height: 880px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* la barre est hors du hero (elle devient un template part partagé en
     phase 4) : le hero réserve sa hauteur pour que rien ne bouge */
  padding-top: var(--hauteur-barre);
}

/* hero des pages internes : même découpe, même rayon, moins de poids */
.hero--court { min-height: 470px; }
.hero--court .hero-corps { align-items: flex-end; padding-bottom: 56px; }
.hero--court h1 { font-size: var(--t-h1-page); }
.hero--court .hero-sous { margin-top: 18px; font-size: 18px; }

/* hero sans photo, pour les pages de texte : la barre reste lisible */
.hero--uni { background: var(--noir); min-height: 380px; }
.hero--uni::after { background: none; }
.hero-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
  line-height: 0;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* la référence garde sa photo lisible à droite : le voile ne couvre
     que la colonne de texte, il ne noircit pas toute l'image */
  background:
    linear-gradient(98deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.56) 30%, rgba(0,0,0,.14) 58%, rgba(0,0,0,0) 80%),
    linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 38%);
}

/* Barre de navigation posée sur la carte hero.
   Elle est SŒUR du hero, pas son enfant : en phase 4 elle devient
   `parts/header.html`, un template part partagé par toutes les pages, et un
   template part ne peut pas vivre à l'intérieur du contenu d'une page.
   Positionnée en absolu sur l'encart du hero, elle retombe au pixel près là
   où elle était quand elle appartenait à son flux. */
.barre {
  position: absolute;
  top: var(--marge-hero);
  left: var(--marge-hero);
  right: var(--marge-hero);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 34px;
  /* la barre occupe exactement la hauteur que le hero lui réserve : sortie du
     flux, une boîte plus courte ferait remonter son contenu de 19 px */
  min-height: var(--hauteur-barre);
}
.marque img { height: 42px; width: auto; }


/* Le menu se centre par symétrie, jamais en position absolue : sortie du
   flux, la navigation de Gutenberg se rétracte autour d'un conteneur de
   largeur nulle et le menu tombe à 11 px. Marque et zone d'action prennent
   la même fraction, le menu occupe donc exactement le milieu. */
.barre .marque { flex: 1 1 0; }
.barre .zone-cta,
.barre .wp-block-buttons.zone-cta {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.menu {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.menu a {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.82);
  font-size: var(--t-petit);
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.menu a:hover { color: #fff; background: rgba(255,255,255,.10); }
.menu a.actif { background: var(--blanc); color: var(--noir); font-weight: 600; }

.burger { display: none; }

/* bloc de texte du hero */
.hero-corps {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 34px 0 46px;
}
/* 960 px : la ligne la plus longue du titre mesure 899 px à 88 px de corps —
   un bloc plus étroit la ferait passer à trois lignes */
.hero-texte { max-width: 960px; }
.hero h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.04;
  color: var(--blanc);
  letter-spacing: -.03em;
  /* le titre tient sur deux lignes : la coupure est posée à la main,
     balance la déplacerait */
  text-wrap: pretty;
}
.hero-sous {
  margin-top: 26px;
  max-width: 520px;
  color: rgba(255,255,255,.82);
  font-size: 19px;
  line-height: 1.5;
}
.hero .bouton { margin-top: 38px; }

/* les trois idées du brief, en pastilles de verre sur la photo */
.chips {
  display: flex;
  align-self: flex-end;
  margin: 0 34px 34px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10,10,12,.46);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chip {
  padding: 18px 20px;
  width: 188px;   /* largeur relevée sur la référence, ramenée à 1440 px */
}
.chip + .chip { border-left: 1px solid rgba(255,255,255,.14); }
.chip-mot {
  display: block;
  /* « TRANSPARENCE » est le mot le plus long : 136 px à ce réglage,
     pour 148 px disponibles dans la pastille */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blanc);
}
.chip-note {
  display: block;
  margin-top: 5px;
  font-size: var(--t-mini);
  line-height: 1.35;
  color: rgba(255,255,255,.68);
}

/* ==========================================================================
   2 · INTRO — texte centré + bande de vignettes en arc
   ========================================================================== */

.intro { padding: 104px 0 96px; text-align: center; }
.intro-phrase {
  max-width: 760px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: -.012em;
}
.intro-phrase strong { font-weight: 700; }

/* les vignettes n'ont pas toutes la même hauteur : l'arc de la référence */
.vignettes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  margin: 46px 0 40px;
}
.vignettes figure {
  width: 132px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.vignettes img { width: 100%; height: 100%; object-fit: cover; }
.vignettes figure:nth-child(1) { height: 92px; }
.vignettes figure:nth-child(2) { height: 112px; }
.vignettes figure:nth-child(3) { height: 132px; }
.vignettes figure:nth-child(4) { height: 112px; }
.vignettes figure:nth-child(5) { height: 92px; }

/* ==========================================================================
   3 · RÉALISATIONS — mosaïque asymétrique
   ========================================================================== */

.realisations { padding: 0 0 104px; }

.mosaique {
  display: grid;
  grid-template-columns: 1fr 1fr 1.24fr 1fr;
  grid-template-rows: 232px 232px;
  gap: 14px;
}
.tuile {
  position: relative;
  border-radius: var(--r-carte);
  overflow: hidden;
  display: block;
}
.tuile-photo { position: absolute; inset: 0; margin: 0; line-height: 0; }
.tuile-photo a { display: block; width: 100%; height: 100%; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tuile:hover img { transform: scale(1.04); }
.tuile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 70%);
}
/* le cartouche ne capte pas le clic : il laisse passer vers le lien de l'image */
.tuile-texte { position: absolute; top: 20px; left: 22px; right: 22px; z-index: 1; pointer-events: none; }
.tuile-titre {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--blanc);
}
.tuile-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--t-petit);
  color: rgba(255,255,255,.76);
}

/* le gabarit asymétrique relevé sur la référence :
   une large en haut à gauche, deux petites dessous, une haute au centre,
   deux empilées à droite */
.m1 { grid-column: 1 / 3; grid-row: 1; }
.m2 { grid-column: 1;     grid-row: 2; }
.m3 { grid-column: 2;     grid-row: 2; }
.m4 { grid-column: 3;     grid-row: 1 / 3; }
.m5 { grid-column: 4;     grid-row: 1; }
.m6 { grid-column: 4;     grid-row: 2; }

/* Filtrage : toutes les variantes sont déjà dans la page, le script ne fait
   que basculer des classes (règle 7). La mosaïque asymétrique se recompose
   en grille régulière, sinon le retrait d'une tuile laisserait un trou. */
.mosaique--filtree { grid-template-rows: none; grid-auto-rows: 248px; }
.mosaique--filtree .tuile { grid-column: auto; grid-row: auto; }
.tuile.masquee { display: none; }

/* ==========================================================================
   4 · SERVICES — bande grise bord à bord, cartes blanches
   ========================================================================== */

.services {
  background: var(--bande);
  padding: 104px 0 110px;
}
.grille-services {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
/* trois cartes puis deux plus larges : la référence autorise déjà
   des cartes de largeurs différentes (sa mosaïque en vit) */
.carte-service:nth-child(-n+3) { grid-column: span 2; }
.carte-service:nth-child(n+4)  { grid-column: span 3; }

.carte-service {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 10px 10px 20px;
  transition: box-shadow .22s ease, transform .22s ease;
}
.carte-service:hover { box-shadow: 0 16px 38px rgba(0,0,0,.09); transform: translateY(-3px); }

.carte-media { position: relative; }
.carte-media figure { margin: 0; line-height: 0; }
.carte-media img {
  width: 100%;
  height: 196px;
  object-fit: cover;
  border-radius: var(--r-photo);
}
.badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(12,12,14,.52);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--blanc);
  font-size: var(--t-mini);
  font-weight: 600;
}

.carte-corps { padding: 18px 12px 0; flex: 1; display: flex; flex-direction: column; }
.carte-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--texte-doux);
  font-size: var(--t-petit);
}
.carte-meta::before { width: 15px; height: 15px; background: var(--orange); }
/* Ces sélecteurs doivent être AU MOINS aussi spécifiques que la fabrique
   d'icônes plus haut : elle pose le raccourci `mask`, qui remet mask-image
   à none. En (0,1,0) contre (0,1,1), la forme ne s'appliquerait jamais et
   l'icône sortirait en carré plein. */
.carte-meta.meta--maison::before   { mask-image: var(--i-maison);   -webkit-mask-image: var(--i-maison); }
.carte-meta.meta--plan::before     { mask-image: var(--i-plan);     -webkit-mask-image: var(--i-plan); }
.carte-meta.meta--bouclier::before { mask-image: var(--i-bouclier); -webkit-mask-image: var(--i-bouclier); }
.carte-meta.meta--outil::before    { mask-image: var(--i-outil);    -webkit-mask-image: var(--i-outil); }
.carte-meta.meta--epingle::before  { mask-image: var(--i-epingle);  -webkit-mask-image: var(--i-epingle); }
.carte-corps h3 {
  margin-top: 10px;
  font-size: var(--t-h3);
  font-weight: 600;
}
.carte-corps p {
  margin-top: 10px;
  color: var(--texte-doux);
  font-size: 15px;
  line-height: 1.55;
}
.carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
}
/* La mention est un <p> : elle hérite sinon du margin-top des paragraphes de
   la carte, ce qui la décale de 4 px dans le centrage flex du pied. */
.carte-pied .mention { margin-top: 0; font-size: 15px; font-weight: 700; }
.carte-pied .mention em { font-style: normal; font-weight: 500; color: var(--texte-doux); }

/* ==========================================================================
   5 · SUIVI À DISTANCE — pile de photos pivotées (la profondeur)
   ========================================================================== */

.suivi { padding: 112px 0; }
.suivi-grille {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 70px;
  align-items: center;
}

.pile { position: relative; height: 470px; }
.pile figure {
  position: absolute;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 22px 50px rgba(0,0,0,.20);
}
.pile img { width: 100%; height: 100%; object-fit: cover; }
/* trois calques : deux sortent du conteneur, comme dans la référence.
   La rotation passe par --rot pour que l'animation d'entrée puisse partir
   de zéro et finir EXACTEMENT sur la valeur statique (porte 4). */
.pile figure { transform: rotate(var(--rot)); }
.pile .p1 { --rot: -9deg;   width: 250px; height: 330px; left: 0;    top: 92px; z-index: 1; }
.pile .p2 { --rot: -2.5deg; width: 268px; height: 380px; left: 152px; top: 18px; z-index: 2; }
.pile .p3 { --rot: 6deg;    width: 262px; height: 356px; left: 320px; top: 76px; z-index: 3; }

.suivi-texte h2 { font-size: var(--t-h2-edito); line-height: 1.06; }
.suivi-texte p {
  margin-top: 22px;
  max-width: 470px;
  color: var(--texte-doux);
  line-height: 1.62;
}
.suivi-liste {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.suivi-liste li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
}
.suivi-liste li::before {
  width: 19px; height: 19px; margin-top: 2px;
  background: var(--orange);
  mask-image: var(--i-check); -webkit-mask-image: var(--i-check);
}
.suivi-texte .bouton { margin-top: 34px; }

/* ==========================================================================
   6 · APPEL — photo pleine largeur, bord à bord
   ========================================================================== */

.appel {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.appel-photo {
  position: absolute; inset: 0;
  margin: 0;
  z-index: -2;
  line-height: 0;
}
.appel-photo img { width: 100%; height: 100%; object-fit: cover; }
.appel::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.52), rgba(0,0,0,.72));
}
.appel h2 {
  font-size: var(--t-h2-edito);
  color: var(--blanc);
  line-height: 1.08;
  max-width: 760px;
  margin-inline: auto;
}
.appel p {
  margin: 20px auto 0;
  max-width: 540px;
  color: rgba(255,255,255,.78);
}

.champ-appel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
  margin: 34px auto 0;
  padding: 8px 8px 8px 24px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Contact Form 7 enrobe chaque champ dans un <span> et passe le corps du
   formulaire dans wpautop : sans ces deux règles, l'enveloppe et le <p>
   deviennent les éléments flex et la pastille se disloque. */
/* Le formulaire EST .champ-appel : il n'est pas son propre descendant, donc
   `.champ-appel .wpcf7-form > p` ne matche rien. C'est `> p` qu'il faut. */
.champ-appel > p { display: contents; }
.champ-appel .wpcf7-form-control-wrap { flex: 1; min-width: 0; }

.champ-appel input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.champ-appel input::placeholder { color: rgba(255,255,255,.62); }
/* Contact Form 7 rend l'envoi comme un <input>, et un <input> ne porte pas de
   pseudo-élément : la flèche ne peut pas être un ::after. Elle est donc
   dessinée en image de fond — même technique des deux côtés, pour que la
   maquette et le site aient exactement la même boîte. */
.champ-appel .envoi-rond {
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--orange);
  background-image: var(--i-fleche-noir);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  font-size: 0;
  cursor: pointer;
  transition: background-color .18s ease;
}
.champ-appel .envoi-rond:hover { background-color: var(--orange-mat); }
.champ-appel button::before {
  content: ""; display: block; width: 16px; height: 16px;
  background: var(--noir);
  -webkit-mask: var(--i-fleche-noir) center / contain no-repeat;
  mask: var(--i-fleche-noir) center / contain no-repeat;
}

/* ==========================================================================
   7 · PIED DE PAGE — bande noire bord à bord
   ========================================================================== */

.pied {
  background: var(--noir);
  color: rgba(255,255,255,.66);
  padding: 82px 0 34px;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.pied-marque img { height: 46px; width: auto; margin-bottom: 26px; }
.pied-marque p { font-size: 15px; line-height: 1.85; }
.pied-marque a:hover { color: var(--orange); }

.pied h4 {
  margin-bottom: 20px;
  color: var(--blanc);
  font-size: var(--t-h3);
  font-weight: 600;
}
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.pied ul a { font-size: 15px; transition: color .16s ease; }
.pied ul a:hover { color: var(--orange); }

.reseaux { display: flex; gap: 10px; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--ligne-sombre);
  color: var(--blanc);
  transition: background .18s ease, border-color .18s ease;
}
.reseaux a:hover { background: var(--orange); border-color: var(--orange); color: var(--noir); }
/* Uniquement les liens qui portent une classe .res-- : dans le thème, le
   pied utilise core/social-links, qui apporte ses propres SVG. Sans ce
   filtre, ce ::before pose un carré blanc par-dessus et repousse l'icône
   hors de la pastille. */
.reseaux a[class*="res--"]::before { width: 17px; height: 17px; background: currentColor; }
.reseaux a.res--whatsapp::before  { mask-image: var(--i-whatsapp);  -webkit-mask-image: var(--i-whatsapp); }
.reseaux a.res--facebook::before  { mask-image: var(--i-facebook);  -webkit-mask-image: var(--i-facebook); }
.reseaux a.res--instagram::before { mask-image: var(--i-instagram); -webkit-mask-image: var(--i-instagram); }
.reseaux a.res--linkedin::before  { mask-image: var(--i-linkedin);  -webkit-mask-image: var(--i-linkedin); }

.pied-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 62px;
  padding-top: 26px;
  border-top: 1px solid var(--ligne-sombre);
  font-size: var(--t-petit);
}
.pied-bas nav { display: flex; gap: 26px; flex-wrap: wrap; }
.pied-bas a:hover { color: var(--orange); }

/* ==========================================================================
   PAGES INTERNES
   Aucun débat esthétique rouvert : on réemploie les jetons de l'accueil —
   mêmes rayons, mêmes couleurs, même échelle, mêmes cartes.
   ========================================================================== */

.section { padding: 104px 0; }
.section--gris { background: var(--bande); }
.section--serre { padding: 76px 0; }
.section--haut { padding-top: 96px; padding-bottom: 0; }

/* ---------- bloc éditorial : image d'un côté, texte de l'autre ---------- */

.bloc-edito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bloc-edito + .bloc-edito { margin-top: 104px; }
.bloc-edito--inverse .bloc-media { order: 2; }
.bloc-media figure { margin: 0; line-height: 0; }
.bloc-media img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: var(--r-carte);
}
.bloc-texte h2 { font-size: var(--t-h2-edito); line-height: 1.06; }
.bloc-texte h3 { font-size: var(--t-h2); line-height: 1.08; }
.bloc-texte p { margin-top: 20px; color: var(--texte-doux); line-height: 1.65; }
.bloc-texte .bouton { margin-top: 30px; }
.bloc-texte .suivi-liste { margin-top: 24px; }

/* ---------- carte de texte : valeurs, engagements ---------- */

.grille-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.carte-valeur {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 34px 30px;
  transition: box-shadow .22s ease, transform .22s ease;
}
.carte-valeur:hover { box-shadow: 0 16px 38px rgba(0,0,0,.09); transform: translateY(-3px); }
.carte-valeur .pastille-mot {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--noir);
  color: var(--blanc);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .08em;
}
.carte-valeur h3 { font-size: var(--t-h3); }
.carte-valeur p { margin-top: 12px; color: var(--texte-doux); font-size: 15px; line-height: 1.6; }

/* ---------- étapes numérotées ---------- */

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.etape {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  padding: 30px 26px;
}
.etape .num {
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.etape h3 { font-size: 18px; }
.etape p { margin-top: 10px; color: var(--texte-doux); font-size: 15px; line-height: 1.6; }

/* ---------- galerie de projets ---------- */

.grille-projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 386 px, et non les 268 que déclarait la première version : tant que l'image
   remplissait la tuile en hauteur automatique, c'est sa proportion naturelle
   qui fixait la hauteur réelle. L'image étant désormais en absolu — comme le
   fera le bloc core/image — la déclaration s'applique pour de bon, et c'est la
   hauteur constatée qu'il faut écrire. */
.grille-projets .tuile { min-height: 386px; }

/* ---------- FAQ ----------
   `details`/`summary` natif : accessible au clavier, ouvrable sans script,
   et convertible tel quel en bloc `core/details` en phase 4. */

.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: #d2d2d8; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--sortie);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* tout ce qui n'est pas le résumé est la réponse — vrai aussi pour le
   balisage que produira `core/details` */
.faq details > :not(summary) {
  padding: 0 26px 24px;
  color: var(--texte-doux);
  line-height: 1.7;
}

/* ---------- formulaire ---------- */

.formulaire { display: grid; gap: 18px; }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ label { font-size: var(--t-petit); font-weight: 600; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ligne);
  border-radius: 14px;
  background: var(--blanc);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.champ textarea { min-height: 156px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 150, 0, .18);
}
.mention-formulaire { font-size: var(--t-petit); color: var(--texte-doux); }

/* Bouton d'envoi : même pastille que partout, mais peinte en fond.
   Contact Form 7 produit un <input>, qui n'accepte pas de pseudo-élément —
   la pastille est donc un dégradé radial et la flèche une image, superposés
   sur l'orange. La maquette utilise le même input, donc la même boîte. */
.formulaire input[type="submit"] {
  height: 52px;
  padding: 0 52px 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--orange);
  background-image: var(--i-fleche-or),
    radial-gradient(circle 17px at calc(100% - 26px) 50%, var(--noir) 0 17px, rgba(0,0,0,0) 17px);
  background-repeat: no-repeat, no-repeat;
  background-position: right 19px center, 0 0;
  background-size: 14px 14px, 100% 100%;
  color: var(--noir);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.formulaire input[type="submit"]:hover { background-color: var(--orange-mat); transform: translateY(-1px); }

/* ---------- coordonnées ---------- */

.info-contact { display: grid; gap: 20px; }
.info-ligne { display: flex; align-items: flex-start; gap: 16px; }
/* le rond est décoratif : un groupe vide serait un bloc vide dans l'éditeur,
   que le client sélectionne, ne comprend pas, et supprime */
.info-ligne::before {
  content: "";
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background-color: var(--noir);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}
.info--adresse::before  { background-image: var(--i-epingle-or); }
.info--mail::before     { background-image: var(--i-mail-or); }
.info--tel::before      { background-image: var(--i-tel-or); }
.info--whatsapp::before { background-image: var(--i-whatsapp-or); }
.rond-icone::before { width: 19px; height: 19px; background: var(--orange); }
.info--adresse  .rond-icone::before { mask-image: var(--i-epingle);  -webkit-mask-image: var(--i-epingle); }
.info--mail     .rond-icone::before { mask-image: var(--i-mail);     -webkit-mask-image: var(--i-mail); }
.info--tel      .rond-icone::before { mask-image: var(--i-tel);      -webkit-mask-image: var(--i-tel); }
.info--whatsapp .rond-icone::before { mask-image: var(--i-whatsapp); -webkit-mask-image: var(--i-whatsapp); }
.info-lib { display: block; font-size: 15px; font-weight: 700; }
.info-val,
.info-val a { display: block; margin-top: 2px; color: var(--texte-doux); font-size: 15px; }
.info-val a:hover { color: var(--orange); }

.encart-sombre {
  background: var(--noir);
  color: rgba(255,255,255,.72);
  border-radius: var(--r-carte);
  padding: 34px 32px;
}
.encart-sombre h3 { color: var(--blanc); font-size: var(--t-h3); }
.encart-sombre p { margin-top: 12px; font-size: 15px; line-height: 1.65; }
.encart-sombre--clair { background: var(--bande); color: var(--texte-doux); }
.encart-sombre--clair h3 { color: var(--noir); }
.encart-sombre + .encart-sombre { margin-top: 16px; }

/* utilitaires — remplacent les styles en ligne, que Gutenberg ne garde pas */
.espace-haut { margin-top: 28px; }
.centre { text-align: center; }
.h2-section { font-size: var(--t-h2); }

.grille-contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }

/* ---------- pages de texte (mentions, confidentialité) ---------- */

.page-texte { max-width: 780px; margin-inline: auto; }
.page-texte h2 { font-size: 26px; margin-top: 46px; }
.page-texte h2:first-child { margin-top: 0; }
.page-texte p,
.page-texte li { color: var(--texte-doux); line-height: 1.75; }
.page-texte p { margin-top: 14px; }
.page-texte ul { margin: 14px 0 0; padding-left: 22px; }
.page-texte li + li { margin-top: 8px; }
.page-texte .a-completer {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  background: #fff1d9;
  border: 1px dashed var(--orange);
  color: #8a5200;
  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================================
   Adaptations — rendu à 390 px sans défilement horizontal
   ========================================================================== */

@media (max-width: 1100px) {
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 224px; }
  .m1, .m2, .m3, .m4, .m5, .m6 { grid-column: auto; grid-row: auto; }
  .m1 { grid-column: span 2; }
  .grille-services { grid-template-columns: repeat(4, 1fr); }
  .carte-service:nth-child(-n+3) { grid-column: span 2; }
  .carte-service:nth-child(n+4)  { grid-column: span 2; }
  .suivi-grille { grid-template-columns: 1fr; gap: 40px; }
  .pile { height: 420px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 42px; }

  .bloc-edito { gap: 42px; }
  .bloc-media figure { margin: 0; line-height: 0; }
.bloc-media img { height: 360px; }
  .grille-trois { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .grille-projets { grid-template-columns: 1fr 1fr; }
  .grille-contact { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .menu--ouvert {
    display: flex;
    position: absolute;
    top: 84px; left: 10px; right: 10px;
    transform: none;
    z-index: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    background: rgba(12,12,14,.86);
  }
  .menu--ouvert a { text-align: center; }
  .burger {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
  }
  .burger::before {
    width: 18px; height: 18px;
    background: currentColor;
    mask-image: var(--i-burger); -webkit-mask-image: var(--i-burger);
  }
  .barre .bouton { display: none; }
  .barre { padding: 20px 20px; }
  :root { --marge-hero: 10px; --hauteur-barre: 102px; }
  .hero { min-height: 640px; }
  .hero--court { min-height: 400px; }
  .hero--uni { min-height: 300px; }
  .hero-corps { padding: 40px 24px; align-items: flex-end; }
  .chips { flex-direction: column; align-self: stretch; margin: 0 10px 10px; }
  .chip + .chip { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .chip { min-width: 0; padding: 14px 20px; }
}

@media (max-width: 760px) {
  :root { --gouttiere: 20px; }
  .intro { padding: 72px 0 64px; }
  .intro-phrase { font-size: 19px; }
  .vignettes { gap: 10px; flex-wrap: wrap; }
  .vignettes img { width: 104px; }
  .vignettes img:nth-child(n) { height: 88px; }
  .mosaique { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .m1 { grid-column: auto; }
  .services { padding: 72px 0 76px; }
  .grille-services { grid-template-columns: 1fr; }
  .carte-service:nth-child(-n+3),
  .carte-service:nth-child(n+4) { grid-column: auto; }
  .suivi { padding: 76px 0; }
  /* une image pivotée occupe plus large que sa largeur : à 6°, une photo de
     152×206 mesure 173 px de boîte. Les positions tiennent compte de ce
     débordement, sinon la page défile de 1 px à l'horizontale. */
  .pile { height: 320px; }
  .pile .p1 { width: 148px; height: 196px; left: 0;     top: 58px; }
  .pile .p2 { width: 160px; height: 224px; left: 88px;  top: 12px; }
  .pile .p3 { width: 152px; height: 206px; left: 170px; top: 50px; }
  .appel { min-height: 440px; }
  .pied-grille { grid-template-columns: 1fr; gap: 34px; }
  .pied { padding: 62px 0 28px; }
  .pied-bas { margin-top: 42px; }

  .section { padding: 72px 0; }
  .section--serre { padding: 56px 0; }
  .bloc-edito { grid-template-columns: 1fr; gap: 30px; }
  .bloc-edito--inverse .bloc-media { order: 0; }
  .bloc-edito + .bloc-edito { margin-top: 62px; }
  .bloc-media figure { margin: 0; line-height: 0; }
.bloc-media img { height: 270px; }
  .grille-trois,
  .etapes,
  .grille-projets { grid-template-columns: 1fr; }
  .duo-champs { grid-template-columns: 1fr; }
  .faq summary { padding: 18px 20px; font-size: 16px; gap: 16px; }
  .faq details > :not(summary) { padding: 0 20px 20px; }
  .encart-sombre { padding: 28px 24px; }
}

/* Le surtitre est un paragraphe : il hérite sinon de la marge haute que les
   sections posent sur leurs <p>, et la page glisse de 22 px par occurrence.
   Placé ici, après toutes les règles de contexte, pour les dépasser. */
.suivi-texte p.surtitre,
.bloc-texte p.surtitre,
.entete-section p.surtitre,
.grille-contact p.surtitre,
.page-texte p.surtitre { margin-top: 0; }

/* ==========================================================================
   MOUVEMENT
   --------------------------------------------------------------------------
   Trois règles tenues partout :
   1. On n'anime que `transform`, `opacity` et `clip-path` — jamais une
      propriété qui déclenche un calcul de mise en page.
   2. L'état final est TOUJOURS l'état statique de la page. Une fois
      l'animation jouée, la géométrie est au pixel près celle d'une page sans
      animation : c'est ce qui laisse la porte 4 mesurable.
   3. Les états de départ ne s'appliquent que si le JS tourne (`.js`). Sans
      lui, la page s'affiche entièrement, simplement sans mouvement.
   ========================================================================== */

/* ---------- 0 · Rang dans une série ----------
   Le rang passe par une classe et non par un `style="--i:3"` : les blocs
   Gutenberg ne conservent ni les attributs `data-*` ni les styles en ligne
   arbitraires, seul `className` traverse la sérialisation. */
.r1 { --i: 1; } .r2 { --i: 2; } .r3 { --i: 3; }
.r4 { --i: 4; } .r5 { --i: 5; } .r6 { --i: 6; }

/* ---------- 1 · Révélation par blocs ---------- */

.js .anim-monte {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--t-moyen) var(--sortie), transform var(--t-moyen) var(--sortie);
  transition-delay: calc(var(--i, 0) * var(--pas));
}
.js .anim-monte.vu { opacity: 1; transform: none; }

/* ---------- 2 · Révélation ligne à ligne des titres ----------
   Le JS enveloppe chaque ligne (découpe sur les <br>) dans un masque.
   Le texte monte depuis sous le masque : la ligne se pose, elle n'apparaît
   pas. C'est le geste qui porte le hero. */

/* Le masque doit respirer : `overflow: hidden` calé sur la boîte de ligne
   rogne les descendantes (le « g » de Sénégal, le « y » de soyez). On élargit
   donc la boîte de débordement vers le bas, et on la reprend en marge
   négative pour que le flux soit inchangé.
   Le conteneur passe en colonne flex, et ce n'est pas cosmétique : entre
   deux blocs frères, une marge négative FUSIONNE avec la suivante au lieu de
   s'additionner — la compensation est fausse et le titre gagne une dizaine de
   pixels par ligne. Un conteneur flex supprime la fusion des marges, la
   compensation redevient exacte, et la hauteur mesurée est au pixel celle
   d'une page sans animation. */
.js .anim-lignes { display: flex; flex-direction: column; }
.ligne {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.ligne > span { display: block; will-change: transform; }
.js .anim-lignes .ligne > span {
  transform: translate3d(0, 112%, 0);
  transition: transform var(--t-ample) var(--sortie);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .anim-lignes.vu .ligne > span { transform: none; }

/* le surtitre et le paragraphe suivent le titre, jamais l'inverse */


/* ---------- 3 · Révélation des images ----------
   Un volet qui se lève, pas un fondu : le cadrage se dévoile du bas vers le
   haut pendant que la photo finit de se poser. Sur les tuiles, on n'anime
   que le volet — leur `transform` appartient au survol. */

/* Le volet se pose TOUJOURS sur les images filles, jamais sur l'élément
   observé lui-même : une cible entièrement masquée par `clip-path` a une aire
   d'intersection nulle, et l'IntersectionObserver, avec un seuil non nul, ne
   la déclenche jamais — l'image resterait invisible pour toujours. */
.js .anim-devoile img,
.js .anim-devoile-zoom img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-ample) var(--doux);
  transition-delay: calc(var(--i, 0) * var(--pas));
}
.js .anim-devoile.vu img,
.js .anim-devoile-zoom.vu img { clip-path: inset(0 0 0 0); }

.js .anim-devoile-zoom img {
  transform: scale(1.12);
  transition: clip-path var(--t-ample) var(--doux),
              transform 1.5s var(--doux);
  transition-delay: calc(var(--i, 0) * var(--pas));
}
.js .anim-devoile-zoom.vu img { transform: none; }

/* ---------- 4 · La pile du suivi : trois cartes qu'on abat ----------
   Elles partent rassemblées et à plat, puis se déploient sur leur rotation
   finale. C'est la seule pièce franchement spectaculaire de la page, et elle
   est à sa place : c'est la section qui parle de suivi à distance. */

.js .pile figure {
  opacity: 0;
  transform: rotate(0deg) translate3d(0, 56px, 0) scale(.9);
  transition: opacity var(--t-moyen) var(--doux),
              transform 1.15s var(--sortie);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.js .pile.vu figure { opacity: 1; transform: rotate(var(--rot)); }

/* ---------- 5 · Les pastilles du hero arrivent par la droite ---------- */

.js .chips .chip {
  opacity: 0;
  transform: translate3d(26px, 0, 0);
  transition: opacity var(--t-moyen) var(--sortie), transform var(--t-moyen) var(--sortie);
  transition-delay: calc(400ms + var(--i, 0) * 110ms);
}
.js .chips.vu .chip { opacity: 1; transform: none; }

/* ---------- 6 · Photo du hero : un lent recadrage ----------
   Pas de parallaxe ici : elle se combinerait mal avec le zoom d'entrée, les
   deux écrivant dans `transform`. Le hero se pose, il ne bouge plus ensuite. */

.hero-photo { will-change: transform; }
.js .hero-photo {
  transform: scale(1.10);
  transition: transform 1.9s var(--doux);
}
.js .hero.pret .hero-photo { transform: none; }

/* ---------- 6bis · Parallaxe sur la photo de l'appel ----------
   Fonction pure du défilement : `--para` vaut 0 quand la section est centrée,
   donc rien n'est indéterminé au moment de mesurer. L'agrandissement permanent
   donne la marge nécessaire pour que la translation ne découvre aucun bord. */

.appel-photo {
  transform: translate3d(0, var(--para, 0px), 0) scale(1.12);
  will-change: transform;
}

/* ---------- 7 · Micro-interactions ---------- */

/* le mouvement de la pastille est déclaré avec le composant, plus haut */

/* Le cartouche de la tuile suit le volet, avec un temps de retard : l'image
   se dévoile, puis le nom se pose dessus. L'entrée n'utilise que l'opacité,
   pour laisser `transform` au survol. */
.js .tuile.anim-devoile .tuile-texte {
  opacity: 0;
  transition: opacity var(--t-moyen) var(--doux), transform .45s var(--sortie);
  transition-delay: calc(var(--i, 0) * var(--pas) + 280ms), 0s;
}
.js .tuile.anim-devoile.vu .tuile-texte { opacity: 1; }

.tuile-texte { transition: transform .45s var(--sortie); }
.tuile:hover .tuile-texte { transform: translateY(-3px); }

.carte-media img { transition: transform .6s var(--doux); }
.carte-service:hover .carte-media img { transform: scale(1.035); }

.reseaux a { transition: background .18s ease, border-color .18s ease, transform .28s var(--sortie); }
.reseaux a:hover { transform: translateY(-3px); }

.vignettes img { transition: transform .45s var(--sortie), box-shadow .45s var(--doux); }
.vignettes img:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.18); }

/* ---------- 8 · Changement de filtre ----------
   Les tuiles qui entrent se posent, elles ne clignotent pas. */

@keyframes apparition {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.mosaique--anime .tuile:not(.masquee) {
  animation: apparition .42s var(--sortie) both;
  animation-delay: calc(var(--j, 0) * 50ms);
}

/* ==========================================================================
   Mouvement réduit — on ne ralentit pas, on supprime, et on force l'état final
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .js .anim-monte,
  .js .anim-lignes,
  .js .anim-devoile,
  .js .anim-devoile-zoom,
  .js .anim-lignes .ligne > span,
  .js .chips .chip,
  .js .anim-devoile img,
  .js .anim-devoile-zoom img,
  .js .tuile.anim-devoile .tuile-texte {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* la rotation de la pile appartient au design, pas à l'animation */
  .js .pile figure { opacity: 1 !important; transform: rotate(var(--rot)) !important; }
  .hero-photo { transform: none !important; }
  .appel-photo { transform: scale(1.12) !important; }
  .tuile:hover img { transform: none; }
}


/* ==========================================================================
   ADAPTATIONS GUTENBERG
   --------------------------------------------------------------------------
   WordPress imprime le CSS d'un bloc au moment ou il le rend, donc APRES
   cette feuille. A specificite egale c'est le bloc qui gagne : toute
   surcharge doit etre PLUS SPECIFIQUE, pas simplement plus tardive.
   ========================================================================== */

/* Enveloppe generale. low-root n'est pas decoratif : sans lui, la marge
   haute de la carte hero se propage hors de l'enveloppe (fusion de marges)
   et le hero se colle au bord superieur. 
elative donne a la barre, qui est
   en absolu, un bloc conteneur previsible. */
.wp-site-blocks { position: relative; display: flow-root; }
.wp-block-template-part { margin: 0; }
.entry-content, .wp-block-post-content { margin: 0; }

/* WordPress imprime APRES cette feuille deux regles de mise en page :
     .is-layout-flow > *            { margin-block: 0 }        (0,1,0)
     .is-layout-flow > :first-child { margin-block-start: 0 }  (0,2,0)
   A specificite egale c'est le bloc qui gagne, puisqu'il vient plus tard.
   Chaque marge du design que ce duel fait disparaitre doit donc etre
   requalifiee ici, plus specifiquement. Les trois ci-dessous ont ete
   trouvees par le releve comparatif de la porte 4, pas a l'oeil :
   sans elles la page perd 20 px et le hero en gagne 34. */
.wp-block-group.hero { margin: var(--marge-hero); }
.hero > .chips { margin: 0 34px 34px; }
.carte-service .carte-corps > .carte-meta { margin-top: 10px; }

/* Filet de securite sur l'espacement automatique, a specificite NULLE.
   theme.json a deja coupe blockGap a 0 : ecrite en specificite (0,1,0), la
   version naive de cette regle ecraserait toutes les marges du design —
   quatorze marges a zero et 307 px de rythme vertical perdus, sans que l'oeil
   le voie. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { display: block; }
.wp-block-group { box-sizing: border-box; }
.wp-block-heading { margin: 0; }

/* ---------- core/navigation ----------
   Le bloc se rend en mode « responsive » : son conteneur interne est masque
   et reduit a 0 px tant que la feuille du bloc ne le deplie pas. On force
   l'etat deplie au-dessus du point de bascule du theme, et l'etat panneau
   en dessous — sinon le menu se retrouve a 11 px de large sur un ecran large. */
.wp-block-navigation.menu { --navigation-layout-justification-setting: flex-start; }
.wp-block-navigation.menu .wp-block-navigation__container {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
}
.wp-block-navigation.menu .wp-block-navigation-item { margin: 0; }
.wp-block-navigation.menu .wp-block-navigation-item__content {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.82);
  font-size: var(--t-petit);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.wp-block-navigation.menu .wp-block-navigation-item__content:hover {
  color: #fff; background: rgba(255,255,255,.10);
}
.wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.menu .current_page_item > .wp-block-navigation-item__content {
  background: var(--blanc); color: var(--noir); font-weight: 600;
}

@media (min-width: 861px) {
  /* La feuille du bloc empile les entrees en COLONNE tant qu'il se croit en
     mode panneau : sans 
ow, le menu sort en liste verticale de 120 px.
     Et la nav etant en absolu, il lui faut une largeur definie, sinon elle
     se retracte a 11 px autour d'un conteneur de largeur nulle. */
  .barre .wp-block-navigation.menu { width: max-content; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    width: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
  }
  .wp-block-navigation.menu .wp-block-navigation__container {
    flex-direction: row !important;
    align-items: center;
    width: auto !important;
  }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open,
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-close { display: none !important; }
}

@media (max-width: 860px) {
  /* le menu reprend sa place dans le flux pour que la pastille d'ouverture
     tienne le bord droit */
  .barre .wp-block-navigation.menu { position: static; transform: none; margin-left: auto; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--blanc);
  }
  /* masquer le CONTENEUR du bouton, jamais le bouton : la neutralisation du
     conteneur de bloc, ecrite plus bas, gagnerait le duel de display et le
     bouton deborderait de l'ecran */
  .barre .wp-block-buttons.zone-cta { display: none; }
}

/* Le panneau mobile s'ouvre blanc sur blanc si on ne le surclasse pas, et la
   feuille qui pose ce blanc n'est pas inspectable depuis la page. C'est le
   seul endroit du theme ou !important est justifie. */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(0, 0, 0, .97) !important;
  color: var(--blanc) !important;
  padding: 26px 24px;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--blanc); font-size: 19px;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { color: var(--blanc); }

/* ---------- core/site-logo ---------- */
.wp-block-site-logo.marque { line-height: 0; margin: 0; }
.wp-block-site-logo.marque a { display: block; }
.wp-block-site-logo.marque img { height: 42px; width: auto; max-width: none; }
.pied-marque .wp-block-site-logo.marque img { height: 46px; margin-bottom: 26px; }

/* ---------- core/details : l'accordeon de la FAQ ---------- */
.faq .wp-block-details { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-carte); overflow: hidden; }
.faq .wp-block-details[open] { border-color: #d2d2d8; box-shadow: 0 10px 28px rgba(0,0,0,.06); }

/* ---------- core/social-links ---------- */
.wp-block-social-links.reseaux { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wp-block-social-links.reseaux .wp-social-link {
  width: 42px; height: 42px; margin: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--ligne-sombre);
  transition: background .18s ease, border-color .18s ease, transform .28s var(--sortie);
}
/* La pastille est portee par le <li>. L'ancre doit donc etre neutralisee :
   la regle .reseaux a de la maquette lui redonnerait sinon un fond, une
   bordure et un rayon, et l'on verrait un cercle dans un cercle. */
.wp-block-social-links.reseaux .wp-social-link a {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--blanc);
}
.wp-block-social-links.reseaux .wp-social-link a::before { content: none; }
.wp-block-social-links.reseaux .wp-social-link svg { width: 17px; height: 17px; fill: currentColor; }
.wp-block-social-links.reseaux .wp-social-link:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
.wp-block-social-links.reseaux .wp-social-link:hover a { color: var(--noir); }

/* ---------- Contact Form 7 ---------- */
.wpcf7-form-control-wrap { display: block; }
.wpcf7 .formulaire p { margin: 0; }
.wpcf7-not-valid-tip { margin-top: 6px; color: #c0392b; font-size: 13px; font-weight: 500; }
.wpcf7-response-output {
  margin: 18px 0 0; padding: 14px 18px;
  border: 1px solid var(--ligne); border-radius: 14px; font-size: var(--t-petit);
}
.wpcf7-spinner { display: none; }

/* Le bandeau d'appel est une pastille compacte : le message de reponse de
   CF7 y ajoute 48 px de hauteur (marge + interieur + filet) et decale toute
   la section. On le sort du flux sans le supprimer — le visiteur doit savoir
   si son envoi est parti. */
.champ-appel { position: relative; }
.champ-appel .wpcf7-response-output {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 10px;
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.25);
  color: var(--blanc);
}

/* ---------- barre d'administration ----------
   Aucun decalage a ajouter : la barre du theme est positionnee par rapport a
   .wp-site-blocks, que WordPress a DEJA pousse sous sa propre barre. Ajouter
   32 px ici compterait le decalage deux fois et ferait descendre l'en-tete
   hors de la bande que le hero lui reserve. Defaut invisible deconnecte. */