/*
Theme Name: Abdellah Manha
Theme URI: https://abdellahmanha.com
Author: Abdellah Manha
Description: Thème bloc sur mesure du portfolio d’Abdellah Manha, directeur artistique et packaging designer. Tout le contenu est en blocs natifs, éditable dans Gutenberg.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abdellah-manha
Tags: block-theme, full-site-editing, portfolio, one-column
*/

/* =========================================================
   Abdellah Manha — feuille de style commune maquette / thème
   Le DOM est celui des blocs Gutenberg (wp-block-group, figure.wp-block-image…).
   Unité --u : 1 % de la largeur de page, plafonnée à 1440 px.
   Le CSS des blocs étant imprimé APRÈS cette feuille, toute surcharge d'un
   style de bloc est écrite plus spécifique (ex. .wp-block-image.projet img).
   ========================================================= */

:root {
  --brume: #C5CDD6;
  --brume-claire: #F4F6F9;
  --encre: #0E0E0F;
  --blanc: #FFFFFF;
  --orange: #FF4A26;
  --violet: #7314F2;
  --gris: #5B636D;
  --ligne: rgba(14, 14, 15, .55);

  --u: min(1vw, 14.4px);
  --marge: calc(var(--u) * 5);
  --rayon: calc(var(--u) * 1);
  --condense: 68%;
  --large: 125%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--brume);
  color: var(--encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: max(15px, calc(var(--u) * 1.1));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }

/* Espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0px),
   filet de sécurité ici à spécificité nulle — jamais en .wp-block-group > *. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }

/* ---------- Titres condensés ---------- */
.hero-titre, .accordeon-tete, .apropos-titre, .faq-titre, .contact-titre,
.tete-page-titre, .appel-titre, .etape-titre,
.fantome, .label, .pilule-blanche, .wp-block-image.projet figcaption, .badge-blanc a {
  font-stretch: var(--condense);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  hyphens: none;
}

/* ---------- Mots fantômes ---------- */
.fantome {
  display: block;
  white-space: nowrap;
  line-height: .8;
  font-size: calc(var(--u) * 10.5);
  background: linear-gradient(180deg, var(--brume-claire) 8%, rgba(244, 246, 249, .55) 55%, rgba(197, 205, 214, 0) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

/* ---------- Boutons ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * .8); }
.wp-block-button.pilule-noire { display: inline-block; }
.pilule-noire:not(.wp-block-button),
.wp-block-button.pilule-noire > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 3.3);
  min-height: 38px;
  padding: 0 calc(var(--u) * 2.2);
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font-family: inherit;
  font-size: max(13px, calc(var(--u) * .95));
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease;
}
.pilule-noire:not(.wp-block-button):hover,
.wp-block-button.pilule-noire > .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.pilule-petite > .wp-block-button__link { height: calc(var(--u) * 2.7); min-height: 32px; font-size: max(12px, calc(var(--u) * .85)); }

.pilule-blanche {
  display: inline-block;
  padding: calc(var(--u) * .45) calc(var(--u) * 1.3);
  border-radius: 999px;
  background: var(--blanc);
  font-size: max(10px, calc(var(--u) * .7));
}

/* ---------- Libellés ---------- */
.label { display: inline-flex; align-items: center; gap: .35em; font-size: max(12px, calc(var(--u) * 1)); }
.label-trait::before, .label-droite::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--orange); }
.label-mini { font-size: max(10px, calc(var(--u) * .75)); }
.lien-souligne a { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* ---------- Réseaux (core/social-links) ---------- */
ul.wp-block-social-links.reseaux { display: flex; flex-wrap: nowrap; gap: calc(var(--u) * .6); margin: 0; padding: 0; list-style: none; }
ul.wp-block-social-links.reseaux li.wp-social-link {
  display: flex;
  width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9);
  min-width: 36px; min-height: 36px;
  margin: 0; border-radius: 50%;
  background: var(--blanc); color: var(--encre);
  transform: none;
  transition: background .2s ease, color .2s ease;
}
ul.wp-block-social-links.reseaux li.wp-social-link:hover { background: var(--encre); color: var(--blanc); transform: none; }
ul.wp-block-social-links.reseaux li.wp-social-link a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; color: inherit; }
ul.wp-block-social-links.reseaux li.wp-social-link svg { width: 46%; height: 46%; fill: currentColor; }
ul.wp-block-social-links.reseaux-pied li.wp-social-link { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }

/* ---------- En-tête ---------- */
.entete {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(var(--u) * 1.6) var(--marge) 0;
}
nav.entete-nav, nav.entete-nav .wp-block-navigation__container {
  display: flex; flex-wrap: nowrap; gap: calc(var(--u) * 2.4);
  margin: 0; padding: 0; list-style: none;
}
nav.entete-nav { font-size: max(13px, calc(var(--u) * .95)); font-weight: 500; }
nav.entete-nav .wp-block-navigation-item__content { position: relative; padding: 0; color: inherit; }
nav.entete-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: currentColor; transition: right .25s ease; }
nav.entete-nav .wp-block-navigation-item__content:hover::after,
nav.entete-nav .est-actif > .wp-block-navigation-item__content::after,
nav.entete-nav .current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.entete .logo { justify-self: center; }
.wp-block-site-logo.logo img { width: auto; height: max(30px, calc(var(--u) * 2.6)); }
.entete-actions { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--u) * .6); }
.entete-cta { margin-left: calc(var(--u) * .4); }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(var(--u) * 65); margin: 0 var(--marge); }
.fantome-hero { position: absolute; left: 0; right: 0; top: calc(var(--u) * 7.4); font-size: calc(var(--u) * 20); }
.wp-block-image.hero-arche {
  position: absolute; z-index: 1;
  top: calc(var(--u) * 2.3); left: 50%;
  width: calc(var(--u) * 38); height: calc(var(--u) * 38);
  transform: translateX(-50%);
  border-radius: calc(var(--u) * 19) calc(var(--u) * 19) 0 0;
  overflow: hidden;
  background: var(--encre);
}
.wp-block-image.hero-arche img { position: absolute; left: -18%; top: 0; width: 110%; max-width: none; height: auto; }

.etiquette {
  position: absolute; z-index: 3;
  padding: calc(var(--u) * .6) calc(var(--u) * 1.5);
  border-radius: 999px;
  background: var(--violet); color: var(--blanc);
  font-size: max(12px, calc(var(--u) * 1)); font-weight: 500; line-height: 1.45;
  white-space: nowrap;
}
.etiquette-gauche { left: calc(var(--u) * 18.5); top: calc(var(--u) * 16.5); transform: rotate(-14deg); }
.etiquette-droite { left: calc(var(--u) * 57); top: calc(var(--u) * 7); transform: rotate(15deg); }

.signature {
  position: absolute; z-index: 2;
  left: calc(var(--u) * 1); right: calc(var(--u) * -1); top: calc(var(--u) * 22);
  display: flex; justify-content: space-between;
  font-family: "Ms Madi", cursive; font-size: calc(var(--u) * 10.5); line-height: 1;
  color: var(--violet);
  pointer-events: none;
}

.hero-bas { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--u) * 41); display: flex; justify-content: space-between; align-items: flex-start; }
.salut { font-size: max(13px, calc(var(--u) * 1.05)); margin-bottom: calc(var(--u) * .9); }
.salut strong { font-weight: 600; }
.hero-titre { font-size: calc(var(--u) * 6.1); line-height: .97; text-wrap: balance; }

.hero-carte {
  position: relative;
  width: calc(var(--u) * 31); min-height: calc(var(--u) * 19);
  margin-top: calc(var(--u) * .6);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.2) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1.1);
  background: var(--blanc);
}
.hero-carte p { font-size: max(15px, calc(var(--u) * 1.45)); line-height: 1.38; }
.hero-carte .lien-souligne { display: inline-block; margin-top: calc(var(--u) * 2.6); font-size: max(12px, calc(var(--u) * .95)); }

/* ---------- Badges crantés (le dessin est un fond CSS, le lien reste éditable) ---------- */
.badge { position: relative; aspect-ratio: 1; }
.badge::before { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.badge a { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-carte .badge-noir { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.2); width: calc(var(--u) * 8); }
.badge-noir::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 104'%3E%3Cpath fill='%230E0E0F' d='M50 4A8.39 8.39 0 0 1 65.73 6.77A8.39 8.39 0 0 1 79.57 14.76A8.39 8.39 0 0 1 89.84 27A8.39 8.39 0 0 1 95.3 42.01A8.39 8.39 0 0 1 95.3 57.99A8.39 8.39 0 0 1 89.84 73A8.39 8.39 0 0 1 79.57 85.24A8.39 8.39 0 0 1 65.73 93.23A8.39 8.39 0 0 1 50 96A8.39 8.39 0 0 1 34.27 93.23A8.39 8.39 0 0 1 20.43 85.24A8.39 8.39 0 0 1 10.16 73A8.39 8.39 0 0 1 4.7 57.99A8.39 8.39 0 0 1 4.7 42.01A8.39 8.39 0 0 1 10.16 27A8.39 8.39 0 0 1 20.43 14.76A8.39 8.39 0 0 1 34.27 6.77A8.39 8.39 0 0 1 50 4Z'/%3E%3Cpath id='c' fill='none' d='M50 50m-29 0a29 29 0 1 1 58 0a29 29 0 1 1-58 0'/%3E%3Ctext fill='%23fff' font-family='Arial Narrow,Helvetica Neue,Arial,sans-serif' font-weight='700' font-size='8' letter-spacing='.4'%3E%3CtextPath href='%23c' textLength='180' lengthAdjust='spacingAndGlyphs'%3ETRAVAILLONS %C2%B7 ENSEMBLE %C2%B7 TRAVAILLONS %C2%B7 ENSEMBLE %C2%B7%3C/textPath%3E%3C/text%3E%3C/svg%3E"); animation: tourne 16s linear infinite; }
.badge-noir a { font-size: 0; color: var(--blanc); }
.badge-noir a::after { content: "↗"; font-size: calc(var(--u) * 1.6); }
.badge-blanc::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 104'%3E%3Cpath fill='%23fff' d='M50 4A8.39 8.39 0 0 1 65.73 6.77A8.39 8.39 0 0 1 79.57 14.76A8.39 8.39 0 0 1 89.84 27A8.39 8.39 0 0 1 95.3 42.01A8.39 8.39 0 0 1 95.3 57.99A8.39 8.39 0 0 1 89.84 73A8.39 8.39 0 0 1 79.57 85.24A8.39 8.39 0 0 1 65.73 93.23A8.39 8.39 0 0 1 50 96A8.39 8.39 0 0 1 34.27 93.23A8.39 8.39 0 0 1 20.43 85.24A8.39 8.39 0 0 1 10.16 73A8.39 8.39 0 0 1 4.7 57.99A8.39 8.39 0 0 1 4.7 42.01A8.39 8.39 0 0 1 10.16 27A8.39 8.39 0 0 1 20.43 14.76A8.39 8.39 0 0 1 34.27 6.77A8.39 8.39 0 0 1 50 4Z'/%3E%3C/svg%3E"); }
.badge-blanc a { font-size: max(9px, calc(var(--u) * .72)); font-weight: 700; line-height: 1.15; }
.badge-blanc a::after { content: "↓"; display: block; margin-top: calc(var(--u) * .5); font-size: calc(var(--u) * 1.5); font-weight: 300; font-stretch: 100%; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Accordéons (titre cliquable + corps toujours présent) ---------- */
.accordeon-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); cursor: pointer; user-select: none; }
.accordeon-tete::after {
  content: ""; flex: none;
  width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2);
  background:
    linear-gradient(var(--encre), var(--encre)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--encre), var(--encre)) center / 1.5px 100% no-repeat;
  transition: background-size .3s ease;
}
.est-ouvert > .accordeon-tete::after { background-size: 100% 1.5px, 1.5px 0; }
.accordeon-tete:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.accordeon-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordeon-corps > * { overflow: hidden; min-height: 0; }
.est-ouvert > .accordeon-corps { grid-template-rows: 1fr; }

/* ---------- Expertise ---------- */
.expertise { margin: calc(var(--u) * 5) var(--marge) 0; }
.expertise-tete { position: relative; height: calc(var(--u) * 11.5); }
.fantome-section { position: absolute; left: 0; top: calc(var(--u) * .5); text-align: left; font-size: calc(var(--u) * 10.6); }
.label-droite { position: absolute; right: 0; bottom: calc(var(--u) * 1.6); }

.accordeon-cartes { display: flex; flex-direction: column; gap: calc(var(--u) * .75); }
.accordeon-cartes .accordeon-item { background: var(--blanc); border-radius: var(--rayon); }
.accordeon-cartes .accordeon-tete { height: calc(var(--u) * 15.5); padding: calc(var(--u) * .5) calc(var(--u) * 3.3) 0 calc(var(--u) * 3.8); font-size: calc(var(--u) * 8.4); line-height: 1; }
.accordeon-cartes .accordeon-tete::after { margin-top: calc(var(--u) * -.5); }
.accordeon-cartes .est-ouvert > .accordeon-tete { height: calc(var(--u) * 12.5); align-items: flex-end; padding-bottom: calc(var(--u) * 1.2); }
.accordeon-cartes .est-ouvert > .accordeon-tete::after { align-self: flex-start; margin-top: calc(var(--u) * 3.6); }
.accordeon-cartes .accordeon-corps p { padding: 0 calc(var(--u) * 3.8); max-width: calc(var(--u) * 58); font-size: max(14px, calc(var(--u) * 1.3)); line-height: 1.4; }
.accordeon-cartes .est-ouvert > .accordeon-corps p { padding-bottom: calc(var(--u) * 4.4); }

/* ---------- À propos ---------- */
.apropos { margin: calc(var(--u) * 11) var(--marge) 0; text-align: center; }
.apropos-titre { max-width: calc(var(--u) * 82); margin: calc(var(--u) * 1.4) auto 0; font-size: calc(var(--u) * 4.8); line-height: 1.04; text-wrap: balance; }
.chiffres { position: relative; height: calc(var(--u) * 45); margin-top: calc(var(--u) * 6.5); text-align: left; }
.chiffres::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * 18.4); height: 1.5px; background: var(--ligne); }
.wp-block-image.apropos-rond {
  position: absolute; z-index: 2; left: 50%; top: 0;
  width: calc(var(--u) * 37); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%; overflow: hidden;
  background: var(--encre);
}
.wp-block-image.apropos-rond img { position: absolute; left: 50%; top: calc(var(--u) * -.5); width: 138%; max-width: none; height: auto; transform: translateX(-50%); }
.chiffre { position: absolute; display: flex; flex-direction: column; }
.chiffre-nombre { font-stretch: var(--large); font-weight: 500; font-size: calc(var(--u) * 7); line-height: 1; letter-spacing: -.035em; }
.chiffre-label { margin-top: calc(var(--u) * .9); font-size: max(11px, calc(var(--u) * .8)); font-weight: 500; }
.chiffre-hg { left: 0; top: calc(var(--u) * 3.6); }
.chiffre-hd { right: 0; top: calc(var(--u) * 1); align-items: flex-end; text-align: right; }
.chiffre-bg { left: 0; top: calc(var(--u) * 24.6); }
.chiffre-bd { right: 0; top: calc(var(--u) * 24.6); align-items: flex-end; text-align: right; }
.etoiles { font-size: max(12px, calc(var(--u) * 1.1)); letter-spacing: .12em; margin-bottom: calc(var(--u) * .9); line-height: 1.45; }
.chiffres .badge-blanc { position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * 31); width: calc(var(--u) * 12.6); transform: translateX(-50%); }

/* ---------- Portfolio ---------- */
.portfolio { margin: calc(var(--u) * 9) var(--marge) 0; }
.fantome-plein { font-size: calc(var(--u) * 10); }
.portfolio .fantome-plein { margin-bottom: calc(var(--u) * 1.2); }
.grille-projets { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.2); }
.wp-block-image.projet { position: relative; aspect-ratio: 1; border-radius: var(--rayon); overflow: hidden; }
.wp-block-image.projet a { display: block; height: 100%; cursor: zoom-in; }
.wp-block-image.projet img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease; }
.wp-block-image.projet:hover img { transform: scale(1.04); }
.wp-block-image.projet figcaption {
  position: absolute; left: calc(var(--u) * 2.3); bottom: calc(var(--u) * 2.3);
  display: inline-flex; align-items: center;
  height: calc(var(--u) * 3.3); min-height: 32px;
  margin: 0; padding: 0 calc(var(--u) * 1.7);
  border-radius: 999px; background: var(--blanc); color: var(--encre);
  font-size: max(11px, calc(var(--u) * .95)); line-height: 1; text-align: left;
  white-space: nowrap; pointer-events: none;
}
.wp-block-image.projet figcaption::after {
  content: "↗";
  position: absolute; left: calc(100% + var(--u) * .5); top: 0;
  display: grid; place-items: center;
  width: calc(var(--u) * 3.3); min-width: 32px; height: 100%;
  border-radius: 50%; background: var(--blanc);
  font-stretch: 100%; font-weight: 400; font-size: max(13px, calc(var(--u) * 1.2));
  transition: transform .3s ease;
}
.wp-block-image.projet:hover figcaption::after { transform: rotate(45deg); }

/* ---------- Avis ---------- */
.avis { margin: calc(var(--u) * 11.5) var(--marge) 0; }
.avis-tete, .section-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(var(--u) * 2.2); border-bottom: 1.5px solid var(--ligne); }
.avis-tete .label { font-size: max(12px, calc(var(--u) * 1.05)); }
.temoignage { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3.6) 0; border-bottom: 1.5px solid var(--ligne); }
.temoignage-estompe { border-bottom: 0; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.08)); mask-image: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.08)); }
.note { font-size: max(11px, calc(var(--u) * .8)); font-weight: 600; letter-spacing: .06em; }
.temoignage .wp-block-quote { margin: calc(var(--u) * 1.3) 0 calc(var(--u) * 2.6); padding: 0; border: 0; max-width: calc(var(--u) * 54); font-size: calc(var(--u) * 3.4); line-height: 1.15; font-weight: 500; letter-spacing: -.012em; }
.auteur-nom { font-size: max(13px, calc(var(--u) * 1)); font-weight: 700; }
.auteur-role { margin-top: 2px; font-size: max(11px, calc(var(--u) * .8)); color: var(--gris); }
.wp-block-image.temoignage-photo { flex: none; width: calc(var(--u) * 23); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.wp-block-image.temoignage-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.05); }

/* ---------- Clients ---------- */
.clients { margin: calc(var(--u) * 9) var(--marge) 0; }
.clients-tete { display: flex; justify-content: space-between; margin-bottom: calc(var(--u) * 1.3); }
.grille-clients { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1); }
.client { display: flex; align-items: center; justify-content: center; aspect-ratio: 17 / 15.6; border-radius: var(--rayon); background: var(--blanc); }
.marque { line-height: 1; white-space: nowrap; }
.marque-1 { font-stretch: var(--large); font-weight: 800; font-size: calc(var(--u) * 2); letter-spacing: -.04em; }
.marque-2 { font-family: "Ms Madi", cursive; font-size: calc(var(--u) * 3.6); }
.marque-3 { font-stretch: 62%; font-weight: 900; font-size: calc(var(--u) * 1.8); letter-spacing: .02em; }
.marque-4 { font-weight: 600; font-size: calc(var(--u) * 2.6); letter-spacing: -.06em; }
.marque-5 { font-stretch: 62%; font-weight: 300; font-size: calc(var(--u) * 1.9); letter-spacing: .28em; text-transform: uppercase; }

/* ---------- FAQ ---------- */
.faq { margin: calc(var(--u) * 9.5) var(--marge) 0; }
.faq-titre { text-align: center; font-size: calc(var(--u) * 5.4); line-height: 1; margin-bottom: calc(var(--u) * 4); }
.accordeon-lignes { border-top: 1.5px solid var(--ligne); }
.accordeon-lignes .accordeon-item { border-bottom: 1.5px solid var(--ligne); }
.accordeon-lignes .accordeon-tete { height: calc(var(--u) * 7.8); font-size: max(14px, calc(var(--u) * 1.35)); line-height: 1.2; }
.accordeon-lignes .accordeon-tete::after { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); min-width: 12px; min-height: 12px; }
.accordeon-lignes .est-ouvert > .accordeon-tete { height: calc(var(--u) * 6.4); align-items: flex-end; padding-bottom: calc(var(--u) * 1.1); }
.accordeon-lignes .accordeon-corps p { max-width: calc(var(--u) * 78); font-size: max(13px, calc(var(--u) * .95)); line-height: 1.5; }
.accordeon-lignes .est-ouvert > .accordeon-corps p { padding-bottom: calc(var(--u) * 3); }

/* ---------- Contact ---------- */
.contact { margin: calc(var(--u) * 10) var(--marge) 0; }
.fantome-contact { margin-bottom: calc(var(--u) * 1); }
.contact-carte { display: grid; grid-template-columns: calc(var(--u) * 36) 1fr; min-height: calc(var(--u) * 44); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); }
.wp-block-image.contact-photo { position: relative; overflow: hidden; background: var(--encre); }
.wp-block-image.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 6%; }
.contact-form { padding: calc(var(--u) * 4.4) calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 6); }
.contact-titre { font-size: calc(var(--u) * 4.8); line-height: 1; margin-bottom: calc(var(--u) * 3.2); }

/* Contact Form 7 */
.contact-form .wpcf7 form { margin: 0; }
.champs { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 3.3); row-gap: calc(var(--u) * 2.4); }
.champ-large { grid-column: 1 / -1; }
.champ { display: flex; flex-direction: column; }
.champ-label { font-size: max(12px, calc(var(--u) * .85)); font-weight: 600; }
.champ .wpcf7-form-control-wrap { display: block; }
.champ input, .champ textarea {
  display: block; width: 100%;
  padding: calc(var(--u) * .5) 0 calc(var(--u) * .6);
  border: 0; border-bottom: 1.5px solid var(--encre); border-radius: 0;
  background: transparent; color: var(--encre);
  font: inherit; font-size: max(13px, calc(var(--u) * .9));
  outline: none;
}
.champ input::placeholder, .champ textarea::placeholder { color: #9AA1A9; }
.champ input:focus, .champ textarea:focus { border-bottom-color: var(--orange); }
.champ textarea { height: calc(var(--u) * 8.5); resize: none; }
.contact-form .wpcf7-submit { margin-top: calc(var(--u) * 3); }
.contact-form .wpcf7-spinner { display: none; }
.contact-form .wpcf7-not-valid-tip { display: block; margin-top: calc(var(--u) * .4); font-size: max(12px, calc(var(--u) * .8)); color: var(--orange); }
.contact-form .wpcf7 form .wpcf7-response-output { margin: calc(var(--u) * 2) 0 0; padding: calc(var(--u) * .8) calc(var(--u) * 1.4); border: 1.5px solid var(--encre); border-radius: 999px; font-size: max(13px, calc(var(--u) * .9)); }
.contact-form .wpcf7 form.init .wpcf7-response-output { display: none; }

/* ---------- Pied de page ---------- */
.pied { margin-top: calc(var(--u) * 10); overflow: hidden; }
.pied-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 0 calc(var(--u) * 9); }
.pied-copy { font-size: max(11px, calc(var(--u) * .8)); font-weight: 500; padding-bottom: calc(var(--u) * .8); }
.pied-centre { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); }
nav.pied-nav { justify-self: end; padding-bottom: calc(var(--u) * .8); font-size: max(11px, calc(var(--u) * .8)); font-weight: 500; }
nav.pied-nav, nav.pied-nav .wp-block-navigation__container { display: flex; flex-wrap: nowrap; gap: calc(var(--u) * .8); margin: 0; list-style: none; }
nav.pied-nav .wp-block-navigation__container { padding: 0; }
nav.pied-nav .wp-block-navigation-item__content { padding: 0; color: inherit; }
nav.pied-nav .wp-block-navigation-item + .wp-block-navigation-item::before { content: "·"; margin-right: calc(var(--u) * .8); }
.fantome-pied { margin: calc(var(--u) * 3) var(--marge) 0; height: calc(var(--u) * 7); overflow: hidden; font-size: calc(var(--u) * 15); }

/* =========================================================
   Pages internes
   ========================================================= */
.section-tete { margin-bottom: calc(var(--u) * 2.4); }
/* (0,2,0) : WordPress annule la marge haute de tout premier enfant de groupe
   avec :root :where(.is-layout-flow) > :first-child — même force, imprimé avant. */
.wp-block-group.tete-page { margin: calc(var(--u) * 4) var(--marge) 0; }
.tete-page-bas { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * -1.5); }
.tete-page-titre { max-width: calc(var(--u) * 52); margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 6.1); line-height: .97; text-wrap: balance; }
.tete-page-carte { flex: none; min-height: 0; margin-top: 0; }
.portfolio-page, .expertise-page { margin-top: calc(var(--u) * 9); }

.methode { margin: calc(var(--u) * 11) var(--marge) 0; }
.grille-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .75); }
.etape { display: flex; flex-direction: column; min-height: calc(var(--u) * 26); padding: calc(var(--u) * 2.6) calc(var(--u) * 2.4) calc(var(--u) * 3); border-radius: var(--rayon); background: var(--blanc); }
.etape-num { font-stretch: var(--large); font-weight: 500; font-size: calc(var(--u) * 5); line-height: 1; letter-spacing: -.035em; }
.etape-titre { margin-top: auto; padding-top: calc(var(--u) * 4); font-size: calc(var(--u) * 2.6); line-height: 1; }
.etape p:not(.etape-num) { margin-top: calc(var(--u) * .9); font-size: max(14px, calc(var(--u) * 1.05)); line-height: 1.45; }

.appel { margin: calc(var(--u) * 10) var(--marge) 0; }
.appel-carte { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 7) calc(var(--u) * 6); border-radius: var(--rayon); background: var(--blanc); text-align: center; }
.appel-titre { max-width: calc(var(--u) * 70); font-size: calc(var(--u) * 4.8); line-height: 1.04; text-wrap: balance; }

.contact-page { margin-top: calc(var(--u) * 9); }
.coordonnees { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .75); margin-top: calc(var(--u) * .75); }
.coordonnee { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 12); padding: calc(var(--u) * 2.4); border-radius: var(--rayon); background: var(--blanc); }
.coordonnee-valeur { font-weight: 500; font-size: max(17px, calc(var(--u) * 1.9)); line-height: 1.2; letter-spacing: -.012em; }
.coordonnee-valeur a:hover { text-decoration: underline; }
.coordonnee-lien::after {
  content: "↗"; position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2);
  display: grid; place-items: center;
  width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); min-width: 32px; min-height: 32px;
  border-radius: 50%; background: var(--brume);
  font-size: max(13px, calc(var(--u) * 1.2));
  transition: transform .3s ease;
}
.coordonnee-lien a::before { content: ""; position: absolute; inset: 0; }
.coordonnee-lien:hover::after { transform: rotate(45deg); }

/* =========================================================
   Visionneuse du portfolio (construite par app.js : pure interface)
   ========================================================= */
html.visionneuse-active { overflow: hidden; }
.visionneuse {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 3);
  background: rgba(14, 14, 15, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.visionneuse.est-ouverte { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.visionneuse-cadre { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); min-width: 0; height: 100%; margin: 0; }
.visionneuse-image { max-width: 100%; max-height: calc(100vh - var(--u) * 14); border-radius: var(--rayon); object-fit: contain; transform: scale(.97); transition: opacity .25s ease, transform .35s ease; }
.visionneuse.est-ouverte .visionneuse-image { transform: scale(1); }
.visionneuse-image.est-en-charge { opacity: 0; }
.visionneuse-legende { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.visionneuse-nom { display: inline-flex; align-items: center; height: calc(var(--u) * 3.3); min-height: 32px; padding: 0 calc(var(--u) * 1.7); border-radius: 999px; background: var(--blanc); color: var(--encre); font-stretch: var(--condense); font-weight: 800; text-transform: uppercase; font-size: max(11px, calc(var(--u) * .95)); }
.visionneuse-compteur { color: var(--blanc); font-size: max(12px, calc(var(--u) * .9)); font-weight: 500; letter-spacing: .08em; opacity: .75; }
.visionneuse-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 4); height: calc(var(--u) * 4); min-width: 46px; min-height: 46px;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--blanc); color: var(--encre); cursor: pointer;
  transition: transform .2s ease;
}
.visionneuse-bouton:hover { transform: scale(1.08); }
.visionneuse-bouton:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; }
.visionneuse-bouton svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visionneuse-fermer { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); z-index: 1; }
.visionneuse-prec { grid-column: 1; }
.visionneuse-suiv { grid-column: 3; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 760px) {
  :root { --marge: 16px; --rayon: 12px; }
  body { font-size: 15px; }

  .entete { grid-template-columns: auto 1fr; row-gap: 14px; padding: 14px 16px 0; }
  .entete .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .entete-actions { grid-column: 2; grid-row: 1; }
  .entete-actions ul.wp-block-social-links.reseaux { display: none; }
  nav.entete-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; font-size: 14px; }
  nav.entete-nav, nav.entete-nav .wp-block-navigation__container { justify-content: space-between; gap: 0; }
  nav.entete-nav .wp-block-navigation__container { width: 100%; }
  .wp-block-site-logo.logo img { height: 28px; }

  .hero { height: auto; padding-bottom: 4px; }
  .fantome-hero { top: 34px; }
  .wp-block-image.hero-arche { position: relative; top: auto; left: auto; transform: none; margin: 16px auto 0; width: 74vw; height: 80vw; border-radius: 37vw 37vw 0 0; }
  .etiquette { font-size: 12px; padding: 6px 13px; }
  .etiquette-gauche { left: 0; top: 34vw; }
  .etiquette-droite { left: auto; right: 0; top: 10vw; }
  .signature { left: -1vw; right: -1vw; top: 50vw; font-size: 15vw; }
  .hero-bas { position: relative; top: auto; flex-direction: column; gap: 22px; margin-top: 22px; }
  .salut { font-size: 14px; margin-bottom: 8px; }
  .hero-titre { font-size: 10.6vw; }
  .hero-carte { width: 100%; min-height: 0; margin-top: 0; padding: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; border-radius: 14px; }
  .hero-carte > p:first-child { width: 100%; font-size: 17px; }
  .hero-carte .lien-souligne { margin-top: 18px; margin-bottom: 8px; font-size: 13px; }
  .hero-carte .badge-noir { position: relative; right: auto; bottom: auto; width: 78px; margin-top: 12px; }
  .badge-noir a::after { font-size: 18px; }

  .expertise { margin-top: 64px; }
  .expertise-tete { height: 74px; }
  .fantome-section { font-size: 19vw; top: 0; }
  .label-droite { bottom: 6px; }
  .accordeon-cartes { gap: 8px; }
  .accordeon-cartes .accordeon-tete,
  .accordeon-cartes .est-ouvert > .accordeon-tete { height: auto; min-height: 84px; align-items: center; padding: 20px 18px 20px 20px; gap: 14px; font-size: 8.6vw; line-height: .95; }
  .accordeon-cartes .est-ouvert > .accordeon-tete { padding-bottom: 10px; }
  .accordeon-tete::after, .accordeon-cartes .accordeon-tete::after, .accordeon-cartes .est-ouvert > .accordeon-tete::after { width: 26px; height: 26px; margin-top: 0; align-self: center; }
  .accordeon-cartes .accordeon-corps p { padding: 0 20px; max-width: none; font-size: 15px; }
  .accordeon-cartes .est-ouvert > .accordeon-corps p { padding-bottom: 24px; }

  .apropos { margin-top: 80px; }
  .pilule-blanche { font-size: 11px; padding: 5px 12px; }
  .apropos-titre { font-size: 7.4vw; margin-top: 14px; }
  .chiffres { height: auto; margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .chiffres::before { display: none; }
  .wp-block-image.apropos-rond { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 80vw; }
  .chiffres .badge-blanc { top: calc(80vw - 50px); width: 100px; }
  .badge-blanc a { font-size: 10px; }
  .badge-blanc a::after { font-size: 18px; margin-top: 4px; }
  .chiffre { position: static; }
  .chiffre.chiffre-hg, .chiffre.chiffre-hd { grid-row: 2; margin-top: 52px; } /* (0,2,0) : voir .tete-page */
  .chiffre-bg, .chiffre-bd { grid-row: 3; }
  .chiffre-nombre { font-size: 12vw; }
  .chiffre-label { font-size: 12px; margin-top: 6px; }
  .etoiles { font-size: 12px; margin-bottom: 6px; }

  .portfolio { margin-top: 72px; }
  .portfolio .fantome-plein { margin-bottom: 10px; }
  .grille-projets { grid-template-columns: 1fr; gap: 12px; }
  .wp-block-image.projet figcaption { left: 14px; bottom: 14px; padding: 0 14px; font-size: 12px; }
  .wp-block-image.projet figcaption::after { left: calc(100% + 6px); }

  .avis { margin-top: 72px; }
  .avis-tete { padding-bottom: 16px; }
  .temoignage { gap: 16px; padding: 26px 0; align-items: flex-start; }
  .temoignage .wp-block-quote { font-size: 21px; margin: 10px 0 16px; }
  .wp-block-image.temoignage-photo { width: 76px; }

  .clients { margin-top: 64px; }
  .clients-tete { margin-bottom: 12px; }
  .grille-clients { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .client { grid-column: span 2; }
  .client:nth-child(n+4) { grid-column: span 3; aspect-ratio: auto; }
  .marque-1 { font-size: 4.4vw; }
  .marque-2 { font-size: 7.6vw; }
  .marque-3 { font-size: 4vw; }
  .marque-4 { font-size: 5.6vw; }
  .marque-5 { font-size: 3.8vw; letter-spacing: .18em; }

  .faq { margin-top: 72px; }
  .faq-titre { font-size: 8.8vw; margin-bottom: 28px; }
  .accordeon-lignes .accordeon-tete,
  .accordeon-lignes .est-ouvert > .accordeon-tete { height: auto; min-height: 60px; align-items: center; padding: 16px 0; gap: 16px; font-size: 15px; }
  .accordeon-lignes .est-ouvert > .accordeon-tete { padding-bottom: 10px; }
  .accordeon-lignes .accordeon-tete::after { width: 14px; height: 14px; }
  .accordeon-lignes .accordeon-corps p { max-width: none; font-size: 14px; }
  .accordeon-lignes .est-ouvert > .accordeon-corps p { padding-bottom: 20px; }

  .contact { margin-top: 72px; }
  .fantome-contact { margin-bottom: 10px; }
  .contact-carte { grid-template-columns: 1fr; min-height: 0; }
  .wp-block-image.contact-photo { height: 96vw; }
  .contact-form { padding: 28px 20px 30px; }
  .contact-titre { font-size: 11vw; margin-bottom: 24px; }
  .champs { grid-template-columns: 1fr; row-gap: 20px; }
  .champ-label { font-size: 13px; }
  .champ input, .champ textarea { font-size: 15px; padding: 8px 0; }
  .champ textarea { height: 110px; }
  .contact-form .wpcf7-submit { margin-top: 26px; }

  .pied { margin-top: 64px; }
  .pied-ligne { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 0 16px; text-align: center; }
  .pied-copy { order: 2; padding: 0; font-size: 12px; }
  nav.pied-nav { justify-self: center; padding: 0; font-size: 13px; }
  ul.wp-block-social-links.reseaux-pied { gap: 8px; }
  ul.wp-block-social-links.reseaux-pied li.wp-social-link { width: 38px; height: 38px; }
  .fantome-pied { height: 9vw; margin-top: 26px; }

  .wp-block-group.tete-page { margin-top: 28px; }
  .tete-page-bas { flex-direction: column; align-items: stretch; gap: 22px; margin-top: 10px; }
  .tete-page-titre { font-size: 10.6vw; margin-top: 14px; }
  .tete-page-carte { width: 100%; }
  .portfolio-page, .expertise-page, .contact-page { margin-top: 56px; }
  .section-tete { margin-bottom: 16px; padding-bottom: 14px; }
  .methode { margin-top: 64px; }
  .grille-etapes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .etape { min-height: 0; padding: 18px 16px 20px; }
  .etape-num { font-size: 11vw; }
  .etape-titre { padding-top: 26px; font-size: 22px; }
  .etape p:not(.etape-num) { font-size: 14px; }
  .appel { margin-top: 64px; }
  .appel-carte { gap: 18px; padding: 40px 20px; }
  .appel-titre { font-size: 8.4vw; }
  .coordonnees { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
  .coordonnee { min-height: 0; gap: 14px; padding: 20px; }
  .coordonnee-valeur { font-size: 19px; }
  .coordonnee-lien::after { top: 16px; right: 16px; }

  .visionneuse { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 18px 12px; padding: 76px 16px 28px; }
  .visionneuse-cadre { grid-column: 1 / -1; grid-row: 1; gap: 14px; }
  .visionneuse-image { max-height: calc(100vh - 230px); }
  .visionneuse-prec { grid-column: 1; grid-row: 2; justify-self: end; }
  .visionneuse-suiv { grid-column: 2; grid-row: 2; justify-self: start; }
  .visionneuse-fermer { top: 16px; right: 16px; }
}

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