/*
Theme Name: GTS — Guinea Technology & Supply
Theme URI: https://example.com
Author: Guinea Technology & Supply
Description: Thème bloc sur mesure de GTS : informatique et réseaux, pièces et équipements, mines et industrie, import-export, conseil.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gts
Tags: block-theme, full-site-editing, business, one-column
*/

/* ── pictogrammes (généré par scripts/construire-theme.py) ── */
:root {
  --g-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='9' y='9' width='30' height='21' rx='3' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3Cpath d='M3 36h42l-3.5 4.5h-35z' fill='%23000'/%3E%3C/svg%3E");
  --g-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='14.5' fill='none' stroke='%23000' stroke-width='7' stroke-dasharray='5.7 5.7'/%3E%3Ccircle cx='24' cy='24' r='11.5' fill='none' stroke='%23000' stroke-width='4.4'/%3E%3Ccircle cx='24' cy='24' r='4.4' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  --g-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M5 12h24l-4.5 17H5z' fill='%23000'/%3E%3Cpath d='M31 19h8l6 8v6H31z' fill='%23000'/%3E%3Ccircle cx='14' cy='36' r='5' fill='%23000'/%3E%3Ccircle cx='37' cy='36' r='5' fill='%23000'/%3E%3C/svg%3E");
  --g-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3Cellipse cx='24' cy='24' rx='6.5' ry='15' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3Cpath d='M9 24h30M11 15.5h26M11 32.5h26' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --g-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='11' y='9' width='26' height='33' rx='4' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3Cpath d='M18 9V6.5h12V9' fill='none' stroke='%23000' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M17.5 26.5l5 5 9-10.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --g-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 19c10-9 26-9 36 0M12 26c7-6 17-6 24 0M18 33c3.5-3 8.5-3 12 0' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='39' r='2.8' fill='%23000'/%3E%3C/svg%3E");
  --g-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 5l16 6v11c0 10-7 17-16 21C15 39 8 32 8 22V11z' fill='none' stroke='%23000' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M17 23l5 5 9-10' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --g-factory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M5 41V20l11 7v-7l11 7v-7l11 7V9h5v32z' fill='%23000'/%3E%3C/svg%3E");
  --g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --g-disque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3C/svg%3E");
  --g-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 380'%3E%3Cpath d='M92 102 C190 18 360 40 420 260' fill='none' stroke='%23F5B400' stroke-width='5' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3Ccircle cx='92' cy='102' r='13' fill='%234C8DE8' stroke='%23fff' stroke-width='5'/%3E%3Ccircle cx='420' cy='260' r='13' fill='%23F5B400' stroke='%23fff' stroke-width='5'/%3E%3C/svg%3E");
  --g-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3Cpath fill='%230F8A3C' transform='translate(6 6) scale(0.5)' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   GTS — Guinea Technology & Supply · thème bloc
   CSS de la maquette (site/styles.css), adapté au DOM de Gutenberg :
   les classes du composant sont posées sur les blocs via className.
   Registre tiré du logo : Montserrat grasse en capitales, devise en italique bleu,
   bleu + anthracite + ambre, accents du drapeau (rouge, jaune, vert), fond blanc froid.
   Les variables --g-* (icônes en masques CSS) sont générées en tête de :root.
   ========================================================================== */

:root {
  --bleu: #0A4DA3;
  --nuit: #082566;
  --anthracite: #2B2B2E;
  --ambre: #F5B400;
  --ambre-texte: #8F6400;
  --rouge: #D7192D;
  --vert: #0F8A3C;
  --blanc: #FFFFFF;
  --fond-froid: #F2F5F9;
  --trait: #D3DCE9;
  --texte: #333843;
  --texte-doux: #5A6272;
  --rayon: 28px;
  --ombre: 0 1px 0 rgba(8, 37, 102, .06), 0 22px 44px -22px rgba(8, 37, 102, .32);
  --police: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
/* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* L'espacement automatique de Gutenberg est coupé à la source (theme.json : blockGap 0px).
   Filet de sécurité à spécificité nulle — jamais en .wp-block-group > *, qui écraserait
   toutes les marges des composants. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
/* les pastilles décoratives dépassent volontairement de leur cadre : jamais de défilement horizontal */
.wp-site-blocks { overflow-x: clip; }

.enveloppe { width: min(1240px, 100% - 64px); margin-inline: auto; }

/* ───── en-tête ───── */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); position: relative; z-index: 20; }
/* le drapeau, en haut de page */
.entete::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--rouge) 0 33.33%, #FCD116 33.33% 66.66%, var(--vert) 66.66%); }
.entete-ligne { display: flex; align-items: center; gap: 32px; min-height: 92px; }
.marque { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.wp-block-site-logo.marque-logo { width: 168px; height: 68px; overflow: hidden; flex: none; line-height: 0; }
.wp-block-site-logo.marque-logo a { display: block; width: 100%; height: 100%; }
.wp-block-site-logo.marque-logo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 10%; }
.marque-nom { font-size: 11px; line-height: 1.35; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--anthracite); }

.wp-block-navigation.navigation { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wp-block-navigation.navigation .wp-block-navigation__container { gap: 30px; }
.wp-block-navigation.navigation .wp-block-navigation-item__content {
  text-decoration: none; color: var(--anthracite); padding: 6px 0; border-bottom: 3px solid transparent;
}
.wp-block-navigation.navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation.navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--bleu); border-bottom-color: var(--ambre); }
.wp-block-navigation.navigation .wp-block-navigation__responsive-container-open { color: var(--bleu); }
/* Le panneau mobile s'ouvre blanc sur blanc sans ceci (le CSS du bloc est imprimé APRÈS cette feuille) */
.wp-block-navigation.navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--nuit) !important; color: #fff !important; padding: 28px;
}
.wp-block-navigation.navigation .is-menu-open .wp-block-navigation-item__content { color: #fff; font-size: 18px; border-bottom-width: 0; padding: 12px 0; }
.wp-block-navigation.navigation .is-menu-open .wp-block-navigation__container { gap: 6px; }

/* ───── boutons (core/button) : le conteneur est neutralisé, le lien porte le style ───── */
.wp-block-button.bouton { display: inline-flex; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.wp-block-button.bouton .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 15px/1.2 var(--police); text-decoration: none; letter-spacing: .01em; text-transform: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wp-block-button.bouton .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.bouton-grand .wp-block-button__link { padding: 17px 32px; font-size: 16px; }
.wp-block-button.bouton-bleu .wp-block-button__link { background: var(--bleu); color: #fff; box-shadow: 0 12px 24px -12px rgba(10, 77, 163, .8); }
.wp-block-button.bouton-blanc .wp-block-button__link { background: #fff; color: var(--nuit); box-shadow: 0 12px 28px -12px rgba(8, 37, 102, .5); }
.wp-block-button.bouton-ambre .wp-block-button__link { background: var(--ambre); color: var(--anthracite); box-shadow: 0 12px 24px -12px rgba(245, 180, 0, .9); }
.wp-block-button.bouton-vert .wp-block-button__link { background: var(--vert); color: #fff; box-shadow: 0 12px 24px -12px rgba(15, 138, 60, .8); }
.wp-block-button.bouton-rouge .wp-block-button__link { background: var(--rouge); color: #fff; box-shadow: 0 12px 24px -12px rgba(215, 25, 45, .8); }
.wp-block-button.bouton-anthracite .wp-block-button__link { background: var(--anthracite); color: #fff; box-shadow: 0 12px 24px -12px rgba(43, 43, 46, .8); }

/* ───── étiquettes, titres ───── */
.etiquette {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--bleu); line-height: 1.65;
}
/* les filets de part et d'autre : pseudo-éléments, pas de bloc vide */
.etiquette::before,
.hero-tete .etiquette::after, .section-tete .etiquette::after, .page-tete-contenu .etiquette::after { content: ""; width: 46px; height: 2px; background: currentColor; flex: none; }
.etiquette-ambre { color: var(--ambre); }

h1, h2, h3 { font-weight: 800; text-transform: uppercase; hyphens: none; text-wrap: balance; color: var(--anthracite); }
h2 { font-size: clamp(27px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -.012em; }
h3 { font-size: 19px; line-height: 1.2; letter-spacing: .01em; }

.section-tete { text-align: center; max-width: 820px; margin: 0 auto 64px; display: grid; gap: 18px; justify-items: center; }
.section-intro { color: var(--texte-doux); font-size: 18px; }

/* ───── hero ───── */
.hero { padding: 64px 0 96px; overflow-x: clip; position: relative; }
.hero-tete { text-align: center; display: grid; gap: 24px; justify-items: center; }
.hero-titre { font-size: clamp(31px, 5.15vw, 76px); line-height: 1.04; letter-spacing: -.018em; }
.hero-titre em { font-style: normal; color: var(--bleu); }
.devise { font-style: italic; font-weight: 600; font-size: clamp(18px, 1.9vw, 26px); line-height: 1.35; color: var(--bleu); max-width: 720px; text-wrap: balance; }

.hero-scene { position: relative; margin-top: 52px; }
/* planisphère animé : carte-monde.svg porte les points, les flux et l'animation */
.hero-carte {
  position: relative; aspect-ratio: 1800 / 700; border-radius: 44px; overflow: hidden;
  background: radial-gradient(ellipse 60% 85% at 46% 52%, #1048A6 0%, #0A2F78 48%, #061B4D 100%);
  box-shadow: 0 40px 70px -40px rgba(8, 37, 102, .8);
}
.carte-zoom { position: absolute; inset: 0; }
figure.wp-block-image.carte-img { width: 100%; height: 100%; }
figure.wp-block-image.carte-img img { width: 100%; height: 100%; display: block; max-width: none; }
.etiq {
  position: absolute; margin: 0; padding: 8px 14px; border-radius: 14px; background: #fff;
  display: grid; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .55); white-space: nowrap;
}
.etiq-nom { font-size: 14px; font-weight: 800; letter-spacing: .03em; color: var(--anthracite); text-transform: uppercase; line-height: 1.3; }
.etiq-sub { font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.etiq-europe { left: calc(50.7% + 20px); top: 25.4%; transform: translateY(-50%); }
.etiq-nord { right: calc(100% - 29.4% + 20px); top: 30.9%; transform: translateY(-50%); }
.etiq-sud { right: calc(100% - 37.1% + 20px); top: 77.1%; transform: translateY(-50%); }
.etiq-guinee { left: calc(46.2% + 22px); top: calc(53.1% - 12px); transform: translateY(-100%); background: var(--ambre); }
.etiq-chine { left: calc(81.5% + 20px); top: 43.5%; transform: translateY(-50%); }
.etiq-guinee .etiq-nom { font-size: 16px; }
.etiq-guinee .etiq-sub { color: #4A3A00; }

.hero-chip {
  position: absolute; top: 30px; right: -30px; z-index: 4;
  display: flex; align-items: center; gap: 14px; padding: 16px 24px;
  background: #fff; border-radius: 22px; box-shadow: var(--ombre);
}
.hero-chip::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ambre); background: var(--ambre); }
.chip-texte { display: grid; }
.chip-titre { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--anthracite); text-transform: uppercase; line-height: 1.25; }
.chip-sous { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .1em; }

.hero-actions { position: absolute; left: 50%; bottom: -29px; transform: translateX(-50%); display: flex; gap: 14px; z-index: 5; flex-wrap: nowrap; }

/* ───── pôles ───── */
.poles { padding: 40px 0 128px; }
.poles-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px 28px; }
.pole { grid-column: span 4; position: relative; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); border-top: 7px solid var(--c); --h: 214px; display: flex; flex-direction: column; }
.pole-it { grid-column: span 5; --h: 300px; }
.pole-mines { grid-column: span 7; --h: 300px; }
.pole-bleu { --c: var(--bleu); } .pole-vert { --c: var(--vert); } .pole-ambre { --c: var(--ambre); }
.pole-rouge { --c: var(--rouge); } .pole-anthracite { --c: var(--anthracite); }
figure.wp-block-image.pole-photo { height: var(--h); overflow: hidden; border-radius: 21px 21px 0 0; }
figure.wp-block-image.pole-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease; }
.pole:hover figure.wp-block-image.pole-photo img { transform: scale(1.05); }
/* l'icône du pôle : une tuile blanche (::before) et le pictogramme en masque CSS (::after) */
.pole::before {
  content: ""; position: absolute; left: 28px; top: calc(var(--h) - 32px); width: 72px; height: 72px; border-radius: 22px;
  background: #fff; box-shadow: 0 14px 28px -10px rgba(8, 37, 102, .45); z-index: 1;
}
.pole::after {
  content: ""; position: absolute; left: 44px; top: calc(var(--h) - 16px); width: 40px; height: 40px; z-index: 2;
  background: var(--c); -webkit-mask: var(--glyphe) center / contain no-repeat; mask: var(--glyphe) center / contain no-repeat;
}
.pole-corps { padding: 56px 28px 30px; display: grid; gap: 12px; align-content: start; flex: 1; }
.pole-corps p { color: var(--texte-doux); font-size: 16px; }
.pole-corps .pole-lien { margin-top: 6px; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.pole-lien a { text-decoration: none; color: var(--c); }
.pole-lien a::after { content: " →"; }
.pole-ambre .pole-lien a { color: var(--ambre-texte); }
.pole-lien a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* le pôle mines porte la couleur : champ ambre plein */
.pole-mines { background: var(--ambre); border-top-color: var(--anthracite); }
.pole-mines::after { background: var(--anthracite); }
.pole-mines h3 { color: var(--anthracite); }
.pole-mines .pole-corps p { color: #4A3A00; }
.pole-mines .pole-corps .pole-lien a { color: var(--anthracite); }

/* ───── deux bases ───── */
.bases { position: relative; background: var(--nuit); color: #fff; padding: 128px 0; overflow: hidden; isolation: isolate; }
.bases::before {
  content: ""; position: absolute; inset: 0 0 0 38%; z-index: -1;
  background: url("assets/img/mines-carriere.jpg") center / cover; opacity: .2; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.bases-grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.bases h2 { color: #fff; margin: 18px 0 24px; }
.bases-texte > p:not(.etiquette) { color: #C9D6EE; font-size: 18px; max-width: 560px; }
.adresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.adresse { display: grid; gap: 4px; padding: 22px 24px; border-left: 4px solid var(--ambre); background: rgba(255, 255, 255, .07); border-radius: 0 18px 18px 0; font-size: 15px; line-height: 1.5; color: #DCE6F7; }
.adresse-pays { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ambre); }
.adresse-tel { margin-top: 6px; }
.adresse-tel a { font-weight: 700; color: #fff; text-decoration: none; }
.adresse-tel a:hover { text-decoration: underline; }

/* la route Nandy → Conakry : le « GTS » en contour (::before) et le tracé (::after) sont du CSS pur */
.bases-route { position: relative; aspect-ratio: 520 / 380; }
.bases-route::before {
  content: "GTS"; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: clamp(130px, 18vw, 270px); letter-spacing: -.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .2);
}
.bases-route::after { content: ""; position: absolute; inset: 0; background: var(--g-route) center / 100% 100% no-repeat; }
.route-ville { position: absolute; z-index: 1; display: grid; color: #C9D6EE; background: var(--nuit); padding: 8px 14px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.route-nom { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #fff; text-transform: uppercase; }
.route-sous { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.route-ville-nandy { left: 4%; top: 36%; }
.route-ville-conakry { right: 6%; bottom: 8%; }

/* ───── méthode ───── */
.methode { padding: 128px 0; background: var(--fond-froid); }
.methode .section-tete { margin-bottom: 72px; }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); }
.etape { padding: 6px 34px 10px; border-left: 2px solid var(--trait); display: grid; gap: 12px; align-content: start; }
.etape:first-child { border-left: 0; padding-left: 0; }
.etape-num { font-size: clamp(64px, 8vw, 112px); line-height: .9; font-weight: 900; letter-spacing: -.05em; color: var(--c); }
.etape-bleu { --c: var(--bleu); } .etape-vert { --c: var(--vert); } .etape-ambre { --c: var(--ambre); } .etape-rouge { --c: var(--rouge); }
.etape p { color: var(--texte-doux); font-size: 16px; }
.etape .etape-num { color: var(--c); font-size: clamp(64px, 8vw, 112px); }

/* ───── contact ───── */
.contact { padding: 128px 0; }
.contact-panneau {
  position: relative; background: var(--bleu); color: #fff; border-radius: 48px; padding: 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.contact-panneau::after { content: ""; position: absolute; right: -54px; top: -54px; width: 170px; height: 170px; border-radius: 50%; background: var(--ambre); box-shadow: 0 20px 30px -14px rgba(8, 37, 102, .5); }
.contact-panneau h2 { color: #fff; margin: 18px 0 20px; }
.contact-texte > p:not(.etiquette) { color: #D9E6FA; font-size: 18px; }
.contact-liste { margin-top: 36px; display: grid; gap: 16px; }
.contact-item { display: grid; gap: 2px; }
.contact-nom { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ambre); }
.contact-valeur { font-size: 20px; font-weight: 700; }
.contact-valeur a { text-decoration: none; color: #fff; }
.contact-valeur a:hover { text-decoration: underline; }

/* le formulaire : Contact Form 7 (core/shortcode) habillé aux couleurs de la maquette */
.formulaire { position: relative; z-index: 1; background: #fff; color: var(--anthracite); border-radius: var(--rayon); padding: 40px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.formulaire .wpcf7-form { display: grid; gap: 20px; margin: 0; }
.formulaire .wpcf7-form p { margin: 0; }
.formulaire label { display: grid; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire textarea {
  display: block; font: 500 16px/1.4 var(--police); color: var(--anthracite); padding: 14px 16px; border: 2px solid var(--trait);
  border-radius: 14px; background: var(--fond-froid); width: 100%; letter-spacing: 0; text-transform: none;
}
.formulaire textarea { height: 140px; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 0; border-color: var(--bleu); background: #fff; }
.formulaire .wpcf7-submit {
  display: inline-flex; justify-content: center; width: 100%; padding: 17px 32px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--ambre); color: var(--anthracite); font: 700 16px/1.2 var(--police); letter-spacing: .01em;
  box-shadow: 0 12px 24px -12px rgba(245, 180, 0, .9); transition: transform .15s ease;
}
.formulaire .wpcf7-submit:hover { transform: translateY(-2px); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-not-valid-tip { color: var(--rouge); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 6px; }
.formulaire .wpcf7-response-output { margin: 0; padding: 12px 16px; border-radius: 12px; border-width: 2px; font-size: 14px; font-weight: 600; }

/* ───── pied ───── */
.pied { background: var(--anthracite); color: #C6CAD4; padding: 88px 0 0; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; padding-bottom: 64px; }
.pied-nom { font-size: 56px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fff; }
.pied-societe { margin-top: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: #fff; }
.pied-devise { margin-top: 18px; font-style: italic; font-weight: 600; color: var(--ambre); max-width: 300px; }
.pied h3 { color: #fff; font-size: 13px; letter-spacing: .22em; margin-bottom: 18px; }
.pied li { margin-bottom: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-bas { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; }

/* ───── bandeau de page ───── */
.page-tete { position: relative; background: var(--nuit); color: #fff; padding: 56px 0 96px; overflow: hidden; isolation: isolate; text-align: center; }
.page-tete::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3;
  background: url("assets/img/carte-points.svg") 50% 62% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 55%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 55%, #000 25%, transparent 78%);
}
.page-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--rouge) 0 33.33%, #FCD116 33.33% 66.66%, var(--vert) 66.66%); }
.page-tete-contenu { display: grid; justify-items: center; gap: 22px; }
.fil-ariane { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9FB6E0; margin-bottom: 14px; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: #fff; text-decoration: underline; }
.page-tete h1 { color: #fff; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.016em; }
.page-tete h1 em { font-style: normal; color: var(--ambre); }
.page-intro { max-width: 700px; font-size: 19px; color: #C9D6EE; }

/* ───── appel à l'action ───── */
.appel { padding: 0 0 128px; }
.appel-panneau { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 64px; background: var(--bleu); color: #fff; border-radius: 40px; }
.appel-panneau::after { content: ""; position: absolute; left: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--ambre); box-shadow: 0 20px 30px -14px rgba(8, 37, 102, .5); }
.appel-panneau h2 { color: #fff; margin-bottom: 10px; }
.appel-texte p { color: #D9E6FA; font-size: 18px; max-width: 560px; }
.appel-panneau .wp-block-buttons { position: relative; z-index: 1; flex: none; }

/* ───── à propos ───── */
.presentation { padding: 112px 0; }
.presentation-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }
.presentation-texte { display: grid; gap: 20px; }
.presentation-texte h2 { margin-top: -2px; }
.presentation-texte > p:not(.etiquette) { color: var(--texte-doux); font-size: 18px; }
.signature { display: grid; gap: 2px; margin-top: 12px; padding: 6px 0 6px 22px; border-left: 4px solid var(--ambre); }
.signature-titre { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bleu); line-height: 1.65; }
.presentation-texte .signature-nom { font-size: 22px; font-weight: 800; color: var(--anthracite); }
.presentation-texte .signature-tel { font-size: 17px; }
.signature-tel a { font-weight: 700; text-decoration: none; color: var(--texte-doux); }
.signature-tel a:hover { text-decoration: underline; }
figure.wp-block-image.logo-carte { position: relative; margin: 0; background: #fff; border-radius: 40px; border-top: 8px solid var(--bleu); box-shadow: var(--ombre); padding: 28px; }
.logo-carte::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; background: var(--ambre); z-index: -1; }
figure.wp-block-image.logo-carte img { width: 100%; height: auto; border-radius: 24px; }

.valeurs { padding: 112px 0; background: var(--fond-froid); }
.valeurs-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.valeur { --glyphe: var(--g-check); position: relative; background: #fff; border-radius: var(--rayon); border-top: 7px solid var(--c); box-shadow: var(--ombre); padding: 102px 30px 34px; display: grid; gap: 14px; align-content: start; }
.valeur-bleu { --c: var(--bleu); } .valeur-ambre { --c: var(--ambre); } .valeur-vert { --c: var(--vert); } .valeur-rouge { --c: var(--rouge); }
.valeur::before { content: ""; position: absolute; left: 30px; top: 36px; width: 52px; height: 52px; border-radius: 16px; background: var(--c); }
.valeur::after { content: ""; position: absolute; left: 43px; top: 49px; width: 26px; height: 26px; background: #fff; -webkit-mask: var(--glyphe) center / contain no-repeat; mask: var(--glyphe) center / contain no-repeat; }
.valeur-ambre::after { background: var(--anthracite); }
.valeur p { color: var(--texte-doux); font-size: 16px; }

/* ───── services ───── */
.service { padding: 104px 0; --c: var(--bleu); }
.service-vert { --c: var(--vert); background: var(--fond-froid); }
.service-ambre { --c: var(--ambre); }
.service-rouge { --c: var(--rouge); background: var(--fond-froid); }
.service-anthracite { --c: var(--anthracite); }
.service-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.service-inverse .service-photo { order: 2; }
figure.wp-block-image.service-photo { position: relative; margin: 0; }
.service-photo::before { content: ""; position: absolute; inset: 26px -26px -26px 26px; border-radius: 36px; background: var(--c); }
.service-inverse .service-photo::before { inset: 26px 26px -26px -26px; }
figure.wp-block-image.service-photo img { position: relative; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 36px; box-shadow: 0 30px 50px -30px rgba(8, 37, 102, .6); }
.service-texte { position: relative; display: grid; gap: 18px; justify-items: start; padding-top: 90px; }
/* pictogramme du pôle : tuile colorée (::before) + glyphe en masque (::after) */
.service-texte::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 72px; border-radius: 22px; background: var(--c); box-shadow: 0 16px 28px -14px var(--c); }
.service-texte::after { content: ""; position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; background: #fff; -webkit-mask: var(--glyphe) center / contain no-repeat; mask: var(--glyphe) center / contain no-repeat; }
.service-ambre .service-texte::after { background: var(--anthracite); }
.service-texte .etiquette { color: var(--c); }
.service-ambre .service-texte .etiquette { color: var(--ambre-texte); }
.service-texte > p:not(.etiquette) { color: var(--texte-doux); font-size: 18px; }
.liste-coches { display: grid; gap: 12px; margin: 6px 0 14px; }
.liste-coches li { position: relative; padding-left: 36px; font-weight: 600; color: var(--anthracite); }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--c);
  -webkit-mask: var(--g-disque) center / contain no-repeat; mask: var(--g-disque) center / contain no-repeat;
}
.liste-coches li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 9px; height: 5px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.service-ambre .liste-coches li::after { border-color: var(--anthracite); }

/* ───── catalogue ───── */
.catalogue { padding: 112px 0 120px; background: var(--fond-froid); }
.catalogue-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.famille { --c: var(--bleu); position: relative; background: #fff; border-radius: var(--rayon); border-top: 7px solid var(--c); box-shadow: var(--ombre); padding: 120px 32px 34px; display: grid; gap: 16px; align-content: start; }
.famille-vert { --c: var(--vert); } .famille-ambre { --c: var(--ambre); } .famille-rouge { --c: var(--rouge); } .famille-anthracite { --c: var(--anthracite); }
.famille::before { content: ""; position: absolute; left: 32px; top: 36px; width: 68px; height: 68px; border-radius: 20px; background: var(--c); }
.famille::after { content: ""; position: absolute; left: 47px; top: 51px; width: 38px; height: 38px; background: #fff; -webkit-mask: var(--glyphe) center / contain no-repeat; mask: var(--glyphe) center / contain no-repeat; }
.famille-ambre::after { background: var(--anthracite); }
.liste-points { display: grid; gap: 10px; }
.liste-points li { position: relative; padding-left: 24px; color: var(--texte-doux); font-weight: 600; font-size: 16px; }
.liste-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.note-catalogue { margin-top: 64px; display: grid; justify-items: center; gap: 24px; text-align: center; }
.note-catalogue p { max-width: 720px; font-size: 18px; color: var(--texte-doux); }

/* ───── pictogrammes : le glyphe est choisi par une classe ico-* posée sur la carte ───── */
.ico-laptop { --glyphe: var(--g-laptop); } .ico-gear { --glyphe: var(--g-gear); } .ico-truck { --glyphe: var(--g-truck); }
.ico-globe { --glyphe: var(--g-globe); } .ico-clipboard { --glyphe: var(--g-clipboard); } .ico-wifi { --glyphe: var(--g-wifi); }
.ico-shield { --glyphe: var(--g-shield); } .ico-factory { --glyphe: var(--g-factory); }

/* ───── bouton WhatsApp flottant (core/buttons) ───── */
.wp-block-buttons.wa-flottant { position: fixed; right: 22px; bottom: 22px; z-index: 60; margin: 0; }
.wp-block-button.wa-bouton .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 14px; border-radius: 999px;
  background: var(--vert); color: #fff; text-decoration: none; text-transform: none; border: 0;
  font: 700 15px/1.2 var(--police); box-shadow: 0 14px 30px -10px rgba(8, 37, 102, .55); transition: transform .15s ease;
}
.wp-block-button.wa-bouton .wp-block-button__link::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--g-wa) center / contain no-repeat; }
.wp-block-button.wa-bouton .wp-block-button__link:hover { transform: translateY(-2px); }

/* ───── 404 ───── */
.page-404 { padding: 128px 0 120px; }
.page-404 .enveloppe { display: grid; gap: 22px; justify-items: start; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ───── adaptatif ───── */
@media (max-width: 1100px) {
  .wp-block-buttons.entete-cta { display: none; }
  .wp-block-navigation.navigation .wp-block-navigation__container { gap: 20px; }
  .pole-it, .pole-mines { grid-column: span 6; --h: 240px; }
  .pole { grid-column: span 6; }
  .pole:nth-child(5) { grid-column: span 12; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .valeurs-grille { grid-template-columns: 1fr 1fr; }
  .catalogue-grille { grid-template-columns: 1fr 1fr; }
  .service-grille { gap: 56px; }
  .presentation-grille { gap: 48px; }
  .hero-chip { right: 12px; }
}
@media (max-width: 860px) {
  .wp-block-buttons.wa-flottant { right: 16px; bottom: 16px; }
  .wp-block-button.wa-bouton .wp-block-button__link { padding: 13px; gap: 0; font-size: 0; }
  .wp-block-button.wa-bouton .wp-block-button__link::before { width: 32px; height: 32px; }
  .enveloppe { width: min(1240px, 100% - 40px); }
  .entete-ligne { min-height: 76px; gap: 16px; padding-block: 8px; }
  .marque-nom { display: none; }
  .wp-block-site-logo.marque-logo { width: 132px; height: 54px; }
  .wp-block-navigation.navigation { font-size: 12px; letter-spacing: .06em; }
  .wp-block-navigation.navigation .wp-block-navigation__container { gap: 14px; }
  .hero { padding: 40px 0 72px; }
  .hero-carte { aspect-ratio: auto; height: 340px; border-radius: 28px; }
  .carte-zoom { inset: auto; width: 200%; aspect-ratio: 1800 / 700; left: -15%; top: 50%; transform: translateY(-50%); }
  .etiq { padding: 5px 9px; border-radius: 10px; }
  .etiq-nom { font-size: 10px; }
  .etiq-sub { display: none; }
  .etiq-guinee .etiq-nom { font-size: 11px; }
  .etiq-nord { right: calc(100% - 29.4% + 14px); }
  .etiq-sud { right: calc(100% - 37.1% + 14px); }
  .etiq-europe { left: 50.7%; top: calc(25.4% - 14px); transform: translate(-50%, -100%); }
  .etiq-guinee { left: calc(46.2% + 8px); top: calc(53.1% - 8px); }
  .etiq-chine { display: none; }
  .hero-chip { display: none; }
  .hero-actions { position: static; transform: none; flex-direction: column; width: 100%; margin-top: 22px; }
  .hero-actions .wp-block-button, .hero-actions .wp-block-button .wp-block-button__link { width: 100%; }
  .poles { padding-top: 96px; padding-bottom: 88px; }
  .poles-grille { gap: 52px 20px; }
  .pole, .pole-it, .pole-mines, .pole:nth-child(5) { grid-column: span 12; --h: 210px; }
  .bases, .methode, .contact { padding-block: 88px; }
  .bases-grille { grid-template-columns: 1fr; gap: 48px; }
  .bases::before { inset: 0; }
  .adresses { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .etape:nth-child(3) { border-left: 0; padding-left: 0; }
  .contact-panneau { grid-template-columns: 1fr; padding: 40px 24px; gap: 40px; border-radius: 32px; }
  .contact-panneau::after { width: 110px; height: 110px; right: -24px; top: -30px; }
  .formulaire { padding: 28px 20px; }
  .pied-grille { grid-template-columns: 1fr; gap: 36px; }
  .pied-bas { flex-direction: column; gap: 6px; }
  .page-tete { padding: 40px 0 72px; }
  .page-intro { font-size: 17px; }
  .appel { padding-bottom: 88px; }
  .appel-panneau { flex-direction: column; align-items: flex-start; padding: 40px 24px; border-radius: 32px; gap: 28px; }
  .presentation, .valeurs, .catalogue { padding-block: 80px; }
  .presentation-grille, .service-grille { grid-template-columns: 1fr; }
  .service { padding-block: 72px; }
  .service-inverse .service-photo { order: 0; }
  .service-photo::before, .service-inverse .service-photo::before { inset: 16px -12px -16px 12px; border-radius: 28px; }
  figure.wp-block-image.service-photo img { border-radius: 28px; }
  .valeurs-grille, .catalogue-grille { grid-template-columns: 1fr; }
  figure.wp-block-image.logo-carte { padding: 18px; border-radius: 30px; }
}
@media (max-width: 520px) {
  .etapes { grid-template-columns: 1fr; }
  .etape, .etape:first-child { border-left: 0; padding-left: 0; }
  .route-ville { padding: 6px 10px; }
  .route-nom { font-size: 14px; }
}