/**
 * cd-hero.css — Hero animé « Click Digital construit des sites internet ».
 * =============================================================================
 * Concept conservé : des blocs abstraits deviennent un vrai site.
 * Nouveau : le site final n'est plus filaire (vrai header, vraies cartes,
 * image), et un cadre d'écran conclut la construction.
 *
 * Modèle d'états (anti-flash) :
 *   • défaut ............... SITE FINI (visible sans JS, et pour reduced-motion)
 *   • [data-cd-anim="ready"] État pré-animation : tout masqué / filaire.
 *                            Posé par un script inline AVANT le paint.
 *   • [data-cd-anim="done"]  = défaut (fini). Posé par GSAP en fin de timeline.
 *
 * Où modifier :
 *   • Variables --cd-* (couleurs, typo, dimensions, --cd-morph, --cd-ease) :
 *     globale.css, section 1.12 (+ overrides ≤1024px juste sous le :root).
 *   • Vitesse de la timeline : objet T dans cd-hero.js.
 * =============================================================================
 */

.cd-hero {
	/* Variables --cd-* : centralisées dans globale.css (section 1.12).
	   Overrides responsive ≤1024px : @media dans globale.css également. */

	/* Pleine largeur, même dans un conteneur contraint (GeneratePress...).
	   Retirer si le hero est déjà placé pleine largeur. */
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;

	/* Fond uni, sans texture (charte). Le seul repère visuel du hero est
	   désormais le cadrage autour du bloc de texte — voir .cd-hero__frame-edge. */
	background: var(--cd-background);
	color: var(--cd-text);
	font-family: var(--cd-font-text);
	overflow: clip;
	isolation: isolate;
}

.cd-hero__inner {
	position: relative;
	z-index: 1;   /* contenu + animation au-dessus du grain */
	width: 100%;
	/* Nettement plus ample que l'ancien 1240px, sans créer de vide central :
	   les deux colonnes (texte ~640px, visuel ~605px) remplissent la largeur. */
	max-width: 1600px;
	margin-inline: auto;
	/* Padding conteneur (échelle --pcd-space-*, globale.css §1.4) :
	   vertical 32↔64px, horizontal 24↔48px — fluide. */
	padding: clamp(var(--pcd-space-6), 4.5vw, var(--pcd-space-8))
	         clamp(var(--pcd-section-y), 3.5vw, var(--pcd-space-7));
	display: flex;
	/* Desktop : le contenu réel est ancré vers le haut (composition éditoriale).
	   L'animation reste centrée via align-self (voir .cd-hero__visual). */
	align-items: flex-start;
	/* Gouttière entre les 2 colonnes : valeur dédiée au hero (hors échelle,
	   calée sur le layout réel — voir contrôle visuel). */
	gap: 56px;
}

/* ===================================================== Ballon d'essai : blocs modulaires */
/* Test graphique indépendant du cadrage existant (voir .cd-hero__frame-edge et
   .cd-builder__screen-edge, non modifiés). Petits accents géométriques bleu /
   bleu marine, purement décoratifs et statiques (pas d'animation pour ce
   premier test). Frère de .cd-hero__inner (pas un enfant) : ne touche à
   aucune structure existante. Placés uniquement dans les bandeaux de padding
   haut/bas du hero — zones garanties vides quelle que soit la hauteur des
   deux colonnes — jamais dans la ligne du texte, des boutons ou du mockup.
   Alignement calé sur .cd-hero__inner (même max-width, même centrage) pour
   que les positions en % restent cohérentes à toutes les largeurs desktop. */
.cd-hero__modules {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 1440px;
	height: 100%;
	transform: translateX(-50%);
	z-index: 0;   /* toujours sous .cd-hero__inner (z-index: 1) */
	pointer-events: none;
}

/* Le motif "blocs modulaires" (.pcd-modgroup / .pcd-modblock + modificateurs
   de taille, couleur, forme) est générique et vit désormais dans
   globale.css (réutilisable dans d'autres sections). Ici : uniquement le
   placement propre au hero. */

/* Placement : 3 groupes maximum, tous ENTIÈREMENT visibles (aucun débord sur
   les bords de la section), aucun dans la ligne du texte, des boutons ou du
   mockup.
   Groupe 1 (grand) : la colonne de texte est nettement plus courte que le
   mockup (--cd-visual-max) qui pilote la hauteur de la rangée → l'espace
   sous le texte, à gauche, est vide sur toute la hauteur restante. On y
   ancre le groupe par le BAS, à une distance du bas de section égale au
   padding vertical de .cd-hero__inner + une marge fixe : il reste donc
   toujours juste au-dessus du bas de la rangée (jamais sous le texte réel,
   jamais dans le padding lui-même), à n'importe quelle largeur desktop,
   sans recalcul empirique par palier. */
.pcd-modgroup[data-cd-mod="1"] {
	bottom: calc(clamp(var(--pcd-space-6), 4.5vw, var(--pcd-space-8)) + 24px);
	left: 6%;
}   /* grand (lg) + petit (sm) */

.pcd-modgroup[data-cd-mod="2"] { top: 10px; left: 6%; }       /* moyen (md) + petit (sm), bandeau haut */
/* bottom: 28px (et pas 8) car le 2e bloc du duo décalé déborde de 16px sous
   la boîte du groupe (voir .pcd-modgroup--offset dans globale.css) — sans
   cette marge le bloc du bas dépasserait le bord inférieur de la section. */
.pcd-modgroup[data-cd-mod="3"] { bottom: 28px; right: 12%; }   /* duo décalé (sm), bandeau bas droit */

/* ======================================================= Contenu commercial */
.cd-hero__content {
	flex: 1.06 1 0;
	max-width: var(--cd-content-max);
	/* Décalage volontaire sous le haut de la zone utile (pas un centrage) :
	   EXTERNE à la boîte (margin, pas padding) pour que cette dernière
	   corresponde réellement au contenu encadré (voir --cd-frame-gap
	   ci-dessous, désormais symétrique sur les 4 côtés). */
	margin-top: var(--cd-content-rise);
	position: relative;
	background: var(--pcd-fond); 
	padding: 24px;
	border-radius: 6px;
	z-index: 2;
	/* Repères de cadrage (voir .cd-hero__frame-edge) : longueur de branche et
	   écart avec le contenu. Desktop ; réduits en @media ≤1024px, masqués ≤980px. */
	--cd-frame-gap: 2px;
	--cd-frame-len: 22px;
	/* Prolongements légers (voir .cd-hero__frame-edge--fade) : suggèrent le
	   cadre sans le fermer, plus longs que l'angle et beaucoup plus discrets.
	   Horizontaux plus courts (dominent moins) ; verticaux plus longs (mieux
	   équilibrés face aux horizontaux) — voir aussi les couleurs dédiées. */
	--cd-frame-ext-x: 90px;
	--cd-frame-ext-y: 80px;
}

.cd-hero__eyebrow {
	margin: 0 0 var(--pcd-space-4);   /* 16px */
	font-family: var(--cd-font-title);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cd-muted);
}

.cd-hero__title {
	margin: 0 0 1.1rem;
	font-family: var(--cd-font-title);
	font-weight: 700;
	font-size: clamp(2rem, 1.2rem + 2.4vw, 2.85rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--cd-text);
	text-wrap: balance;
}

.cd-hero__lead {
	margin: 0 0 1.8rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cd-muted);
}

.cd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pcd-space-3);   /* 12px entre les 2 CTA (idem si empilés) */
}

/* ============================================== Repères de cadrage (texte) */
/* Même langage graphique que les repères du mockup (.cd-builder__screen-edge) :
   4 coins, jamais reliés entre eux, trait horizontal + trait vertical à 90°,
   fins, gris clair, discrets. Ici : purement statiques (pas d'animation, pas
   de JS) — ils encadrent le titre + paragraphe + CTA sans créer de carte ni
   de bordure fermée. Ajoutés comme enfants directs de .cd-hero__content
   (après .cd-hero__actions) : les positions nth-child du rise-in du contenu
   (titre/texte/CTA) ne sont pas décalées, et l'animation ne s'applique pas
   à ces repères (override ci-dessous). */
.cd-hero__content > .cd-hero__frame-edge {
	position: absolute;
	width: 0;
	height: 0;
	animation: none;
	pointer-events: none;
}
.cd-hero__frame-edge::before,
.cd-hero__frame-edge::after {
	content: "";
	position: absolute;
	background: rgba(40, 40, 40, .2);   /* angle : élément le plus visible du cadrage */
}
.cd-hero__frame-edge::before { width: var(--cd-frame-len); height: 1px; }  /* branche horizontale */
.cd-hero__frame-edge::after  { width: 1px; height: var(--cd-frame-len); }  /* branche verticale   */

/* Haut-gauche : ancré au niveau du haut réel du contenu — le décalage
   --cd-content-rise est maintenant un margin-top EXTERNE à la boîte (voir
   .cd-hero__content ci-dessus), donc il n'y a plus rien à compenser ici. */
.cd-hero__frame-edge[data-cd-edge="t"] {
	top: calc(-1 * var(--cd-frame-gap));
	left: calc(-1 * var(--cd-frame-gap));
}
.cd-hero__frame-edge[data-cd-edge="t"]::before { top: 0; right: 0; }
.cd-hero__frame-edge[data-cd-edge="t"]::after  { left: 0; bottom: 0; }

/* Haut-droit */
.cd-hero__frame-edge[data-cd-edge="r"] {
	top: calc(-1 * var(--cd-frame-gap));
	right: calc(-1 * var(--cd-frame-gap));
}
.cd-hero__frame-edge[data-cd-edge="r"]::before { top: 0; left: 0; }
.cd-hero__frame-edge[data-cd-edge="r"]::after  { right: 0; bottom: 0; }

/* Bas-droit : ancré au bas réel du contenu (dernier enfant = les CTA). */
.cd-hero__frame-edge[data-cd-edge="b"] {
	bottom: calc(-1 * var(--cd-frame-gap));
	right: calc(-1 * var(--cd-frame-gap));
}
.cd-hero__frame-edge[data-cd-edge="b"]::before { bottom: 0; left: 0; }
.cd-hero__frame-edge[data-cd-edge="b"]::after  { right: 0; top: 0; }

/* Bas-gauche */
.cd-hero__frame-edge[data-cd-edge="l"] {
	bottom: calc(-1 * var(--cd-frame-gap));
	left: calc(-1 * var(--cd-frame-gap));
}
.cd-hero__frame-edge[data-cd-edge="l"]::before { bottom: 0; right: 0; }
.cd-hero__frame-edge[data-cd-edge="l"]::after  { left: 0; top: 0; }

/* Prolongements légers : suggèrent le cadre sans le fermer. Partent du même
   point d'angle que les branches ci-dessus, mais dans la direction opposée
   (vers l'intérieur, le long des côtés du cadre), plus longs et beaucoup
   plus discrets. Éléments distincts (mêmes contraintes : voir commentaire
   plus haut sur les enfants directs de .cd-hero__content) pour ne pas
   dépasser les 2 pseudo-éléments déjà utilisés par l'angle. Sélecteurs
   combinés (.cd-hero__frame-edge.cd-hero__frame-edge--fade) pour prévaloir
   sur les règles d'angle ci-dessus à spécificité égale sinon. */
.cd-hero__frame-edge.cd-hero__frame-edge--fade::before { width: var(--cd-frame-ext-x); height: 1px; background: rgba(40, 40, 40, .07); }  /* horizontal : le plus discret */
.cd-hero__frame-edge.cd-hero__frame-edge--fade::after  { width: 1px; height: var(--cd-frame-ext-y); background: rgba(40, 40, 40, .11); }  /* vertical : un peu plus lisible, pour équilibrer */

.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="t"]::before { top: 0; left: 0; right: auto; }
.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="t"]::after  { left: 0; top: 0; bottom: auto; }

.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="r"]::before { top: 0; right: 0; left: auto; }
.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="r"]::after  { right: 0; top: 0; bottom: auto; }

.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="b"]::before { bottom: 0; right: 0; left: auto; }
.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="b"]::after  { right: 0; bottom: 0; top: auto; }

.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="l"]::before { bottom: 0; left: 0; right: auto; }
.cd-hero__frame-edge.cd-hero__frame-edge--fade[data-cd-edge="l"]::after  { left: 0; bottom: 0; top: auto; }

.cd-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.4rem;
	border-radius: var(--cd-radius);
	font-family: var(--cd-font-text);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform .15s var(--cd-ease), background-color .15s var(--cd-ease),
		color .15s var(--cd-ease), border-color .15s var(--cd-ease);
}

.cd-hero__btn--primary { background: var(--cd-primary); color: var(--cd-background); }
.cd-hero__btn--primary:hover { transform: translateY(-1px); }
.cd-hero__btn--ghost { color: var(--cd-primary); border-color: var(--cd-border-strong); }
.cd-hero__btn--ghost:hover { border-color: var(--cd-primary); }
.cd-hero__btn:focus-visible { outline: 2px solid var(--cd-secondary); outline-offset: 2px; }

/* Entrée du contenu : glissement seul, jamais de fondu (toujours lisible). */
@keyframes cd-hero-rise {
	from { transform: translateY(8px); }
	to   { transform: none; }
}
.cd-hero__content > * { animation: cd-hero-rise .5s var(--cd-ease) both; }
.cd-hero__content > *:nth-child(2) { animation-delay: .05s; }
.cd-hero__content > *:nth-child(3) { animation-delay: .1s; }
.cd-hero__content > *:nth-child(4) { animation-delay: .15s; }

/* =============================================================== Zone animée */
.cd-hero__visual {
	flex: 0.94 1 0;
	display: flex;
	justify-content: flex-end;
	align-self: center;   /* l'animation reste centrée verticalement, position inchangée */
	min-width: 0;
	position: relative;
	z-index: 3;   /* au-dessus du filigrane (0), de l'inner (1) et du contenu (2) */
}

.cd-builder {
	position: relative;
	width: 100%;
	max-width: var(--cd-visual-max);
	aspect-ratio: var(--cd-builder-ratio);
	container-type: inline-size;
	will-change: transform;
	background-color: var(--cd-background);
}

/* ---- Grille de conception : très discrète, quasi effacée à la fin ---- */
.cd-builder__grid {
	position: absolute;
	inset: -6%;
	background-image:
		linear-gradient(var(--cd-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--cd-grid) 1px, transparent 1px);
	background-size: 12cqi 12cqi;
	-webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 35%, transparent 80%);
	        mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 35%, transparent 80%);
	opacity: .32;
	pointer-events: none;
	transition: opacity var(--cd-morph) var(--cd-ease);
}

/* ---- Graines : formes inspirables du symbole ----------------------- */
.cd-builder__seeds { position: absolute; inset: 0; pointer-events: none; }

.cd-seed {
	position: absolute;
	width: 9cqi;
	height: 9cqi;
	background: var(--cd-primary);
	border-radius: 2px;
	opacity: 0;
}
.cd-seed[data-cd-seed="a"] { left: 43%; top: 39%; }
.cd-seed[data-cd-seed="b"] { left: 53%; top: 39%; }
.cd-seed[data-cd-seed="c"] { left: 43%; top: 49%; }

/* ---- Cadre d'écran : conclusion visuelle -------------------------- */
/* Encadrement délicat : bordure très fine + arrondi léger + ombre diffuse
   presque imperceptible. « Interface finalisée », pas mockup de navigateur. */
.cd-builder__screen {
	position: absolute;
	inset: 0;
	/* Contour complet : structure secondaire, plus léger que les angles
	   (voir .cd-builder__screen-edge) — même hiérarchie que le cadrage du
	   bloc texte à gauche (angle marqué / trait discret). */
	border: 1px solid rgba(40, 40, 40, .1);
	border-radius: var(--cd-radius-screen);
	box-shadow:
		0 18px 45px rgba(23, 23, 15, .055),
		0 2px 8px rgba(23, 23, 15, .03);
	pointer-events: none;
}

/* 4 repères de cadrage aux coins : chaque bord du cadre est PROLONGÉ vers
   l'extérieur par un trait court (13px, 1px), sur la même ligne que la bordure.
   Les deux prolongements se rejoignent au coin → un angle de cadrage extérieur
   (repère de croquis / crop mark), jamais une équerre posée sur le coin.
   Pas de diagonale, pas de retour vers l'intérieur, pas de cassure.
   Le span (0×0) est ancré au coin du cadre ; ::before = prolongement horizontal,
   ::after = prolongement vertical. L'opacité du span est animée par cd-hero.js. */
.cd-builder__screen-edge {
	position: absolute;
	width: 0;
	height: 0;
}
.cd-builder__screen-edge::before,
.cd-builder__screen-edge::after {
	content: "";
	position: absolute;
	/* Angles : structure principale, plus visibles que le contour ci-dessus
	   — même teinte/épaisseur que les angles du cadrage du bloc texte. */
	background: rgba(40, 40, 40, .2);
}
.cd-builder__screen-edge::before { width: 13px; height: 1px; }   /* prolongement horizontal */
.cd-builder__screen-edge::after  { width: 1px;  height: 13px; }  /* prolongement vertical   */

/* Écart entre les angles et le cadre de l'écran (même principe que
   --cd-frame-gap sur le bloc de texte) : les traits ne touchent plus le
   cadre, ce qui laisse voir les prolongements ajoutés ci-dessous. */
.cd-builder__screen { --cd-screen-frame-gap: 2px; --cd-screen-frame-ext-x: 90px; --cd-screen-frame-ext-y: 80px; }

/* haut-gauche : le trait part vers la gauche et vers le haut, à partir du coin */
.cd-builder__screen-edge[data-cd-edge="t"] { top: calc(-1 * var(--cd-screen-frame-gap)); left: calc(-1 * var(--cd-screen-frame-gap)); }
.cd-builder__screen-edge[data-cd-edge="t"]::before { top: 0;    right: 0; }
.cd-builder__screen-edge[data-cd-edge="t"]::after  { left: 0;   bottom: 0; }

/* haut-droit */
.cd-builder__screen-edge[data-cd-edge="r"] { top: calc(-1 * var(--cd-screen-frame-gap)); right: calc(-1 * var(--cd-screen-frame-gap)); }
.cd-builder__screen-edge[data-cd-edge="r"]::before { top: 0;    left: 0; }
.cd-builder__screen-edge[data-cd-edge="r"]::after  { right: 0;  bottom: 0; }

/* bas-droit */
.cd-builder__screen-edge[data-cd-edge="b"] { bottom: calc(-1 * var(--cd-screen-frame-gap)); right: calc(-1 * var(--cd-screen-frame-gap)); }
.cd-builder__screen-edge[data-cd-edge="b"]::before { bottom: 0; left: 0; }
.cd-builder__screen-edge[data-cd-edge="b"]::after  { right: 0;  top: 0; }

/* bas-gauche */
.cd-builder__screen-edge[data-cd-edge="l"] { bottom: calc(-1 * var(--cd-screen-frame-gap)); left: calc(-1 * var(--cd-screen-frame-gap)); }
.cd-builder__screen-edge[data-cd-edge="l"]::before { bottom: 0; right: 0; }
.cd-builder__screen-edge[data-cd-edge="l"]::after  { left: 0;   top: 0; }

/* Prolongements légers (mêmes traits que .cd-hero__frame-edge--fade sur le
   bloc de texte) : suggèrent le cadre sans le fermer, sans toucher à la
   longueur des petits tirets d'angle ci-dessus. */
.cd-builder__screen-edge.cd-builder__screen-edge--fade::before { width: var(--cd-screen-frame-ext-x); height: 1px; background: rgba(40, 40, 40, .07); }
.cd-builder__screen-edge.cd-builder__screen-edge--fade::after  { width: 1px; height: var(--cd-screen-frame-ext-y); background: rgba(40, 40, 40, .11); }

.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="t"]::before { top: 0; left: 0; right: auto; }
.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="t"]::after  { left: 0; top: 0; bottom: auto; }

.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="r"]::before { top: 0; right: 0; left: auto; }
.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="r"]::after  { right: 0; top: 0; bottom: auto; }

.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="b"]::before { bottom: 0; right: 0; left: auto; }
.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="b"]::after  { right: 0; bottom: 0; top: auto; }

.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="l"]::before { bottom: 0; left: 0; right: auto; }
.cd-builder__screen-edge.cd-builder__screen-edge--fade[data-cd-edge="l"]::after  { left: 0; bottom: 0; top: auto; }

/* Repère supérieur gauche : même langage que les repères d'angle (fin, gris clair). */
.cd-builder__screen-bar {
	position: absolute;
	top: 3cqi;
	left: 3cqi;
	width: 9cqi;
	height: 0.7cqi;
	background: rgba(23, 23, 15, .24);
	border-radius: 1px;
	transform-origin: left;
}

/* ---- Cadre : la grille du site ----------------------------------- */
.cd-builder__frame {
	position: absolute;
	inset: 6.5% 5.5% 7% 5.5%;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	/* Rangées titre + texte rééquilibrées : on retire de la hauteur au titre
	   (trop d'air sous lui) pour la donner au texte (plus d'air avant le CTA).
	   Somme titre+texte inchangée -> média, CTA, cartes et header ne bougent pas. */
	grid-template-rows: 0.5fr 1.05fr 1.1fr 0.55fr 1.78fr;
	gap: 2.4cqi;
}

/* =========================================================== BLOCS (fini) */
.cd-block {
	position: relative;
	display: flex;
	align-items: center;
	gap: 3cqi;
	padding: 3cqi;
	border: 1px solid transparent;
	border-radius: var(--cd-radius);
	background: transparent;
	overflow: hidden;
	transition:
		background-color var(--cd-morph) var(--cd-ease),
		border-color var(--cd-morph) var(--cd-ease),
		box-shadow var(--cd-morph) var(--cd-ease);
}

.cd-block[data-cd-block="header"] { grid-column: 1 / -1;  grid-row: 1; padding: 0 2cqi; }
/* Titre + texte du faux site : rapprochés pour former un seul ensemble
   rédactionnel (titre calé bas de sa rangée, texte calé haut de la sienne). */
.cd-block[data-cd-block="title"]  { grid-column: 1 / 4;   grid-row: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end;   padding: 0 1cqi; }
.cd-block[data-cd-block="text"]   { grid-column: 1 / 4;   grid-row: 3; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 1cqi 1cqi 0; }
.cd-block[data-cd-block="cta"]    { grid-column: 1 / 4;   grid-row: 4; justify-content: center; background: var(--cd-primary); }
.cd-block[data-cd-block="media"]  { grid-column: 4 / -1;  grid-row: 2 / 5; padding: 0; background: var(--cd-surface); }
.cd-card:nth-of-type(6) { grid-column: 1 / 3;  grid-row: 5; }
.cd-card:nth-of-type(7) { grid-column: 3 / 5;  grid-row: 5; }
.cd-card:nth-of-type(8) { grid-column: 5 / -1; grid-row: 5; }

/* ---- Mini-header du faux site « L'Atelier » --------------------- */
.cd-site__logo { display: inline-flex; align-items: center; gap: 2.2cqi; }

/* Symbole SVG : « A » massif brun bois + traverse d'assemblage anthracite. */
.cd-site__logo-mark {
	width: 6.4cqi;
	height: 6.4cqi;
	flex: none;
	display: block;
}

.cd-site__logo-name {
	font-family: var(--cd-font-title);
	font-weight: 700;
	font-size: 3.5cqi;
	letter-spacing: -.01em;
	color: var(--cd-text);
}

.cd-site__nav {
	display: inline-flex;
	align-items: center;
	gap: 3cqi;
	margin-left: auto;
}

.cd-site__nav i {
	font-style: normal;
	font-family: var(--cd-font-text);
	font-size: 2.4cqi;
	color: var(--cd-muted);
	white-space: nowrap;
}

/* ---- Zone hero : lignes filaires (absolues, ne poussent pas le texte) --- */
.cd-block__line {
	position: absolute;
	left: 1cqi;
	height: 2.8cqi;
	background: var(--cd-border-strong);
	border-radius: 1px;
	opacity: 0;                  /* fini : le vrai texte prend le relais */
	transition: opacity var(--cd-morph) var(--cd-ease);
}
.cd-block[data-cd-block="title"] .cd-block__line:nth-child(1),
.cd-block[data-cd-block="text"]  .cd-block__line:nth-child(1) { top: 24%; width: 84%; }
.cd-block[data-cd-block="title"] .cd-block__line:nth-child(2),
.cd-block[data-cd-block="text"]  .cd-block__line:nth-child(2) { top: 52%; }
.cd-block__line--short { width: 56%; }

.cd-hero[data-cd-anim="ready"] .cd-block__line { opacity: 1; }

.cd-block__text {
	position: relative;
	opacity: 1;
	color: var(--cd-text);
	transition: opacity var(--cd-morph) var(--cd-ease) .12s;
}

.cd-block__text--title {
	font-family: var(--cd-font-title);
	font-weight: 700;
	font-size: 3.3cqi;
	line-height: 1.18;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.cd-block__text--lead {
	font-family: var(--cd-font-text);
	font-size: 2.5cqi;
	line-height: 1.4;
	color: var(--cd-muted);
}

.cd-block[data-cd-block="cta"] .cd-block__text {
	font-family: var(--cd-font-text);
	font-weight: 500;
	font-size: 2.6cqi;
	color: var(--cd-background);
	white-space: nowrap;
}

/* ---- Bloc visuel : image (couvre) + repli graphique ----------- */
.cd-block__img,
.cd-block__media-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cd-block__img {
	object-fit: cover;
	opacity: 1;
	transition: opacity var(--cd-morph) var(--cd-ease);
}

.cd-block__media-fallback {
	background:
		radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cd-secondary) 22%, transparent), transparent 60%),
		var(--cd-surface-2);
}

/* ---- Cartes : vrais composants -------------------------------- */
.cd-card {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.4cqi;
	padding: 3cqi;
	background: var(--cd-surface);
	box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cd-card__icon {
	position: relative;
	width: 5.4cqi;
	height: 5.4cqi;
	margin-bottom: .4cqi;
	flex: none;
	opacity: 1;
}
.cd-card__icon::before,
.cd-card__icon::after { content: ""; position: absolute; }

/* Icônes « L'Atelier » : abstraites, traits fins, anthracite. */
/* mesure : montant + traverse qui s'assemblent en équerre (pièce ajustée) */
.cd-card__icon[data-cd-icon="mesure"]::before { inset: 0 58% 0 0;  background: var(--cd-primary); border-radius: 1px; }
.cd-card__icon[data-cd-icon="mesure"]::after  { inset: 64% 0 0 0;  background: var(--cd-primary); border-radius: 1px; }
/* atelier : deux pièces qui s'emboîtent (contour + plein en recouvrement) */
.cd-card__icon[data-cd-icon="atelier"]::before { inset: 4% 42% 34% 0; border: 1.5px solid var(--cd-primary); border-radius: 1px; }
.cd-card__icon[data-cd-icon="atelier"]::after  { inset: 34% 0 4% 42%; background: var(--cd-primary); border-radius: 1px; }
/* pose : deux volumes qui montent (progression, idée -> installation) */
.cd-card__icon[data-cd-icon="pose"]::before { inset: 46% 56% 0 0;  background: var(--cd-primary); border-radius: 1px; }
.cd-card__icon[data-cd-icon="pose"]::after  { inset: 10% 0 0 52%;  background: var(--cd-primary); border-radius: 1px; }

.cd-card__title {
	font-family: var(--cd-font-title);
	font-weight: 600;
	font-size: 2.5cqi;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--cd-text);
	opacity: 1;
}

.cd-card__text {
	font-family: var(--cd-font-text);
	font-size: 2cqi;
	line-height: 1.3;
	color: var(--cd-muted);
	opacity: 1;
}

/* =====================================================================
   ÉTAT PRÉ-ANIMATION  —  [data-cd-anim="ready"]
   Tout est masqué / filaire. La JS anime vers l'état fini ci-dessus.
   ================================================================== */
.cd-hero[data-cd-anim="ready"] .cd-builder__grid { opacity: 0; }
.cd-hero[data-cd-anim="ready"] .cd-seed { opacity: 0; }
.cd-hero[data-cd-anim="ready"] .cd-builder__screen { opacity: 0; }   /* écran : conclusion */
.cd-hero[data-cd-anim="ready"] .cd-builder__screen-edge { opacity: 0; }   /* repères d'angle */
.cd-hero[data-cd-anim="ready"] .cd-builder__screen-bar { opacity: 0; transform: scaleX(0); }

.cd-hero[data-cd-anim="ready"] .cd-block {
	opacity: 0;
	border-color: var(--cd-border);
	background: transparent !important;
	box-shadow: none !important;
}
.cd-hero[data-cd-anim="ready"] .cd-block[data-cd-block="media"] .cd-block__img,
.cd-hero[data-cd-anim="ready"] .cd-block__media-fallback { opacity: 0; }
.cd-hero[data-cd-anim="ready"] .cd-block__line { opacity: 1; }        /* filaire visible */
.cd-hero[data-cd-anim="ready"] .cd-block__text { opacity: 0; }
.cd-hero[data-cd-anim="ready"] .cd-site__logo,
.cd-hero[data-cd-anim="ready"] .cd-site__nav i,
.cd-hero[data-cd-anim="ready"] .cd-card__icon,
.cd-hero[data-cd-anim="ready"] .cd-card__title,
.cd-hero[data-cd-anim="ready"] .cd-card__text { opacity: 0; }

/* =============================================================== Responsive */

/* ------------------------------------------------------ Hauteur (desktop)
   Le hero n'avait aucune notion de hauteur de viewport : sa hauteur suivait
   uniquement le contenu, d'où un grand vide sous le hero sur écran haut
   (mesuré : ~260px à 1920×1080, ~620px à 2560×1440) et un padding vertical
   indexé sur vw (donc aveugle à un écran bas). Corrigé ici uniquement, sans
   toucher au contenu, aux proportions colonne texte / visuel, ni à la mise
   en page tablette/mobile (≤1200px, inchangée) : réservé au desktop via le
   même seuil (1201px) que la bascule colonne existante ci-dessous.
   88px = hauteur réelle du header mesurée en direct (.pcd-header, sticky,
   dans le flux normal) = 2 × --pcd-header-gap (12px) + hauteur de
   .pcd-header__bar (64px, non exposée en variable — voir header.css). */
@media (min-width: 1201px) {
	.cd-hero__inner {
		/* 100vh en repli (large support), 100dvh écrase la ligne précédente
		   dès que le navigateur le comprend (barres d'adresse dynamiques
		   prises en compte). min-height, jamais height : le contenu peut
		   toujours dépasser ce plancher sans être coupé. */
		min-height: calc(100vh - (var(--pcd-header-gap) * 2) - 64px);
		min-height: calc(100dvh - (var(--pcd-header-gap) * 2) - 64px);
		/* Remplace la composante VERTICALE du padding (shorthand `padding`
		   ci-dessus, écrit plus haut dans ce fichier) par une valeur indexée
		   sur la hauteur du viewport (dvh) plutôt que sur sa largeur (vw) —
		   la composante horizontale (padding-inline) n'est pas touchée.
		   Plafonnée à --pcd-space-8 (écran haut : pas de respiration
		   excessive), plancher --pcd-space-6 (écran bas : espacement réduit
		   mais jamais nul). padding-top : même échelle, réduite de 30px sur
		   toute la plage (demande explicite) ; padding-bottom inchangé. */
		padding-top: clamp(calc(var(--pcd-space-6) - 30px), calc(6dvh - 30px), calc(var(--pcd-space-8) - 30px));
		padding-bottom: clamp(var(--pcd-space-6), 6dvh, var(--pcd-space-8));
		/* Gouttière entre les 2 colonnes, également indexée sur la hauteur du
		   viewport (avant : 56px fixe, quelle que soit la hauteur d'écran).
		   Repère "écran 17 pouces" (~1600×900, ~900px de hauteur) : gouttière
		   perçue comme trop large — plafonnée à 56px (grands écrans, gain
		   nul par rapport à avant) mais resserrée en dessous. */
		gap: clamp(32px, 5dvh, 56px);
		/* Cause réelle du décalage global signalé : .cd-hero__content a un
		   max-width (--cd-content-max) qui le plafonne, mais .cd-hero__visual
		   n'en avait aucun — sa colonne flex (0.94fr) continuait donc à
		   grandir avec tout l'espace restant même une fois le visuel intérieur
		   plafonné (voir .cd-builder ci-dessous), créant un vide qui
		   n'appartenait ni au texte ni à l'animation. Une fois les DEUX
		   colonnes plafonnées à leur contenu réel (ci-dessous), il ne reste
		   plus de vide interne à répartir : center centre alors le groupe
		   texte+animation dans son ensemble au milieu du héros, au lieu de
		   centrer l'animation seule dans une colonne trop large. */
		justify-content: space-around;
	}

	/* Visuel : plafond de largeur existant (--cd-visual-max) ET nouveau
	   plafond dérivé de la hauteur de viewport (dvh) — le plus petit des
	   deux l'emporte. Ratio carré (--cd-builder-ratio: 1/1, inchangé) :
	   contraindre la largeur suffit à contraindre la hauteur dans les mêmes
	   proportions, sans distordre le visuel. Seuil relevé (65 → 68dvh) pour
	   qu'un écran 17 pouces (~900px de hauteur) atteigne le plafond existant
	   --cd-visual-max (605px) au lieu d'être légèrement raboti (585px). */
	.cd-builder {
		max-width: min(var(--cd-visual-max), clamp(400px, 68dvh, 605px));
	}

	/* La COLONNE (.cd-hero__visual), pas seulement le visuel qu'elle contient,
	   doit être plafonnée à la même valeur — sinon elle continue de grandir
	   au-delà de ce dont l'animation a besoin (voir commentaire sur
	   .cd-hero__inner ci-dessus). Même valeur que .cd-builder : avec ce
	   plafond, la colonne et son contenu font (quasiment) la même largeur,
	   donc justify-content ci-dessous n'a plus vraiment de vide à répartir —
	   conservé comme filet de sécurité, sans effet visible une fois la
	   colonne correctement plafonnée. */
	.cd-hero__visual {
		max-width: min(var(--cd-visual-max), clamp(400px, 68dvh, 605px));
		justify-content: center;
	}

	/* Compense la réduction de padding-top ci-dessus. .cd-hero__content est
	   ancré en haut (flex-start) : il remonte donc du plein montant retiré au
	   padding-top (30px). .cd-hero__visual, lui, est centré verticalement
	   (align-self:center, geste d'origine, inchangé) : quand le padding-top
	   diminue à hauteur de boîte égale (min-height ci-dessus, lui, ne change
	   pas), le centre ne remonte que de LA MOITIÉ de cette réduction (15px).
	   Sans correction, le texte et l'animation qui étaient alignés se
	   désynchronisent de 15px. On redonne donc 15px à .cd-hero__content pour
	   qu'il ne remonte, lui aussi, que de 15px net — les deux blocs
	   remontent alors ensemble, du même montant. */
	.cd-hero__content {
		margin-top: calc(var(--cd-content-rise) + 15px);
	}
}

/* Tablette : on resserre, l'effet complet reste. Les gains desktop
   (1440px / +12 % / gap large / ancrage haut) ne s'appliquent pas ici :
   on revient au centrage vertical doux d'avant.
   Les overrides des variables --cd-* (visual-max, gap, content-rise,
   content-max) sont dans globale.css, sous le :root. */
@media (max-width: 1024px) {
	.cd-hero__inner { align-items: center; }
	.cd-hero__content {
		margin-top: calc(var(--pcd-space-4) * -1);   /* -16px */
		/* Tablette : repères de cadrage plus courts et collés au texte, comme
		   en desktop (--cd-frame-gap: 2px, voir la règle de base ci-dessus) —
		   20px créait un écart visible entre les tirets et le bloc de texte. */
		--cd-frame-gap: 2px;
		--cd-frame-len: 16px;
		--cd-frame-ext-x: 60px;
		--cd-frame-ext-y: 56px;
	}
	.cd-hero__visual { align-self: auto; }
}

/* Ballon d'essai : entre ~981px et ~1199px, le mockup n'a pas encore atteint
   sa taille desktop (--cd-visual-max) alors que la colonne de texte a déjà
   toute sa hauteur → l'espace sous le texte (où loge le grand bloc) devient
   trop court et le bloc toucherait les boutons. Vérifié en pratique : ça
   colle encore à 1100px, c'est net à partir de 1125px → seuil à 1200px avec
   marge. Le moyen et le petit restent (zones toujours sûres, indépendantes
   de cette hauteur de rangée). */
@media (max-width: 1199px) {
	.pcd-modgroup[data-cd-mod="1"] { display: none; }
}

/* Sous 900px : empilé, texte prioritaire. Même structure, 2 cartes. */
@media (max-width: 1200px) {
	.cd-hero__inner { flex-direction: column; align-items: stretch; }
	.cd-hero__content { max-width: none; flex: 1 1 auto; margin-top: 0; }
	.cd-hero__visual { flex: 1 1 auto; justify-content: center; }

	/* Mobile : les repères de cadrage du bloc texte prendraient trop de place
	   une fois la colonne empilée sur toute la largeur → masqués. */
	/*.cd-hero__frame-edge { display: none; }*/

	/* Ballon d'essai : colonne empilée → les bandeaux de padding haut/bas ne
	   sont plus des zones sûres génériques (même logique que ci-dessus) → masqué. */
	.cd-hero__modules { display: none; }

	.cd-builder { max-width: 600px; }

	.cd-builder__frame {
		inset: 6.5% 5.5% 7% 5.5%;
		/* Même rééquilibrage titre/texte qu'en desktop (somme inchangée). */
		grid-template-rows: 0.5fr 1.12fr 1.13fr 0.6fr 1.7fr;
		gap: 2.8cqi;
	}

	/* 3e carte masquée : 2 cartes sur toute la largeur */
	.cd-card:nth-of-type(8) { display: none; }
	.cd-card:nth-of-type(6) { grid-column: 1 / 4; }
	.cd-card:nth-of-type(7) { grid-column: 4 / -1; }
}

@media (max-width: 520px) {
	.cd-builder { max-width: 340px; }
	.cd-hero__actions .cd-hero__btn { flex: 1 1 auto; }

	/* 1 seule carte pleine largeur sur petit écran */
	.cd-card:nth-of-type(7) { display: none; }
	.cd-card:nth-of-type(6) { grid-column: 1 / -1; }
	.cd-hero__inner {
		/* Très petit écran : vertical 8↔64px, horizontal 24↔48px (échelle --pcd-space-*). */
		padding: clamp(var(--pcd-space-2), 2vw, var(--pcd-space-8))
		         clamp(var(--pcd-space-5), 3.5vw, var(--pcd-space-7));
	}
}

/* Sous 450px : tailles de texte fixes pour la colonne commerciale. */
@media (max-width: 449.98px) {
	.cd-hero__title { font-size: 28px; }
	.cd-hero__lead  { font-size: 16px; }
}

/* ============================================================ Accessibilité */
@media (prefers-reduced-motion: reduce) {
	.cd-hero *,
	.cd-hero *::before,
	.cd-hero *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	/* L'état par défaut du CSS EST le site fini : rien d'autre à forcer.
	   Le script inline ne pose pas "ready" quand reduced-motion est actif. */
	.cd-hero[data-cd-anim="ready"] * { opacity: 1 !important; transform: none !important; }
	.cd-hero[data-cd-anim="ready"] .cd-block__line { opacity: 0 !important; }
}