/**
 * Accueil — CSS dédié
 */

/* ============================================
   Hero — plein écran + shutter scroll
   ============================================ */
.c2s-accueil-hero.shutter-scroll__section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

.c2s-accueil-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000;
    overflow: hidden;
}

.c2s-accueil-hero__bg .c2s-dark-scene__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.c2s-accueil-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 var(--col);
    padding-top: 15vh;
}

.c2s-accueil-hero__title {
    font-size: 8rem;
    font-weight: 500;
    color: var(--color-bg);
    line-height: 1;
    letter-spacing: -0.03em;
}

.c2s-accueil-hero__sub {
    font-size: var(--18px-size);
    color: var(--color-bg);
    opacity: 0.6;
    margin-top: var(--space-6);
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.c2s-accueil-hero .shutter-scroll-transition {
    color: var(--color-bg);
}

/* ============================================
   Motion — Marquee + Globe + Colonnes animées
   ============================================ */
.c2s-motion {
    overflow-x: clip;
    overflow-y: visible;
}

/* ---- Marquee ---- */
/* Masqué : remplacé par la section Méthode directement après le hero. */
.c2s-motion__marquee {
    display: none !important;
}

.c2s-motion__marquee .radial-text-marquee {
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    margin: 0 auto;
}

/* SVG généré par Osmo — forcer un centrage visuel robuste */
.c2s-motion__marquee .radial-text-marquee > svg {
    left: 50% !important;
    transform: translateX(-50%);
}

.c2s-motion__marquee-text {
    font-size: clamp(4.5em, 10vw, 10em);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-heading);
}

/* ---- Lead — grand texte (style /projets/ : 72px / 500 / -0.035em) + aside
       (paragraphe plus petit sous le grand texte, aligné droite). Collé au
       hero ; la section Création arrive juste en dessous. */
.c2s-motion__lead {
    padding-top: var(--space-10);
    padding-bottom: 0;
}

.c2s-motion__lead-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}

.c2s-motion__lead-sentence {
    grid-column: 2 / span 10;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-heading);
    margin: 0;
}

.c2s-motion__lead-aside {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    margin-top: var(--space-10);
}

.c2s-motion__lead-aside-p {
    grid-column: 9 / span 3;
    font-size: var(--16px-size);
    color: var(--color-body);
    line-height: 1.6;
    margin: 0;
}

/* ---- Création de site — titre + grille méthodes + globe.
       Étalée sur TOUTES les 12 colonnes (pas de col 1 en marge). Le gutter
       extérieur est assuré par .container (padding-inline). ---- */
.c2s-motion__creation {
    padding-top: calc(var(--col) * 2);
    padding-bottom: 0;
}

.c2s-motion__creation-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    margin-bottom: var(--space-6);
    padding-top: var(--space-6);
}

.c2s-motion__creation-title {
    grid-column: 1 / -1;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-heading);
    margin: 0;
}

/* ---- Grille des méthodes : 12 cols pleins, 2 rows.
       - 01/03 : span 3 (cols 1-3, SMALL)
       - 02/04 : span 4 (cols 4-7, le DIV est 4 cols pour laisser de l'air à
                         droite, le VISUAL à l'intérieur est 3 cols via subgrid
                         et donc parfaitement aligné sur la grille parent)
       - Globe : span 5 (cols 8-12, aligné pile sur la grille) ---- */
.c2s-motion__methods {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    column-gap: 1.5em;
    row-gap: 0;
    align-items: stretch;
    /* Hauteur = largeur de 5 cols (gaps inclus) → le globe (5 cols, aspect 1/1)
       remplit exactement les 2 rows, pixel-perfect aligné sur la grille. */
    min-height: calc(var(--col) * 5 + 4 * 1.5em);
}

/* ---- Méthode = subgrid → elle hérite des tracks du parent, ce qui permet
   au visual interne d'être un vrai span-3 cols qui tombe pile sur la grille
   12-col (fini le feeling "pas aligné" au shift+G). ---- */
.c2s-method {
    position: relative;
    color: var(--color-heading);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1.5em;
    min-height: 15em;
    padding: var(--space-4) 0 var(--space-4);
    border-top: 1px solid var(--color-heading);
}

/* Row 1 — 01 SMALL (3 cols) / 02 (4 cols, visuel interne = 3 cols) */
.c2s-method--cta      { grid-column: 1 / span 3; grid-row: 1; }
.c2s-method--booking  { grid-column: 4 / span 4; grid-row: 1; }
/* Row 2 — 03 SMALL (3 cols) / 04 FUSED parcours+tunnel (4 cols, visuel 3 cols) */
.c2s-method--design   { grid-column: 1 / span 3; grid-row: 2; }
.c2s-method--flow     { grid-column: 4 / span 4; grid-row: 2; }

/* ---- Globe : cols 8 → 12 (span 5), aligné sur la grille. Aspect-ratio 1/1
   préservé via padding-top:100%. Max-width bornée pour pas déborder des
   2 rows de méthodes en hauteur. ---- */
.c2s-method--globe {
    grid-column: 8 / -1;
    grid-row: 1 / 3;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    overflow: visible;
    border-top: 1px solid var(--color-heading);
}

/* En subgrid : num / title / visual / tag sont des grid items du method.
   Par défaut chacun span toutes les sub-cols de la méthode (1 / -1).
   Seul le VISUAL des méthodes 02 et 04 est override à span 3 sub-cols
   pour qu'il tombe pile sur 3 cols de la grille parent. */
.c2s-method__num {
    grid-column: 1 / -1;
    grid-row: 1;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: var(--14px-size);
    letter-spacing: 0.08em;
    color: var(--color-body-light);
    margin-bottom: var(--space-4);
}

.c2s-method__title {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0 0 var(--space-4);
}

/* Visual par défaut : span tout (utile pour 01 CTA / 03 palette).
   La row 3 est en 1fr → visual se stretch en hauteur et pousse le tag en bas. */
.c2s-method__visual {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    min-height: 5.5em;
    padding: var(--space-2) 0;
}

/* 02 booking & 04 flow : visual = span 3 des sub-cols (le parent en a 4),
   donc 3 colonnes de la grille 12-col parente → alignement pixel-perfect.
   Plus besoin de padding-right bricolé : c'est la 4ème sub-col qui fait le trou. */
.c2s-method--booking .c2s-method__visual,
.c2s-method--flow .c2s-method__visual {
    grid-column: 1 / span 3;
}

.c2s-method__tag {
    grid-column: 1 / -1;
    grid-row: 4;
    display: block;
    font-size: var(--14px-size);
    color: var(--color-body-light);
    line-height: 1.4;
    margin-top: 0;
    padding-top: var(--space-4);
}

/* ---- Visual 01 — CTA ---- */
.c2s-method__visual--cta { padding: 0; }
.c2s-btn--method { transform: scale(1.05); }

/* ---- Visual 02 — Mini maquette de form de réservation (occupe les 3 sub-cols) ---- */
.c2s-booking {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.75em;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    overflow: hidden;
    font-size: var(--14px-size);
    color: var(--color-heading);
}

.c2s-booking__bar {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.55em 0.8em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.c2s-booking__dot {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
}
.c2s-booking__dot--red    { background: #FF5F57; opacity: 1; }
.c2s-booking__dot--yellow { background: #FEBC2E; opacity: 1; }
.c2s-booking__dot--green  { background: #28C840; opacity: 1; }

.c2s-booking__filename {
    margin-left: auto;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.8em;
    color: var(--color-body-light);
}

.c2s-booking__body {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1em;
}

.c2s-booking__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
}

.c2s-booking__label {
    color: var(--color-body-light);
    font-size: 0.85em;
}

.c2s-booking__value,
.c2s-booking__amount {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.c2s-booking__amount { color: var(--color-brand, #FF7122); }

.c2s-booking__days {
    display: flex;
    gap: 0.35em;
}

.c2s-booking__day {
    width: 1.9em;
    height: 1.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.35em;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    color: var(--color-body-light);
}

.c2s-booking__day.is-active {
    background: var(--color-brand, #FF7122);
    border-color: var(--color-brand, #FF7122);
    color: #fff;
}

.c2s-booking__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 0.35em;
    padding: 0.75em 1em;
    border-radius: 0.45em;
    background: var(--color-brand, #FF7122);
    color: #fff;
    font-weight: 500;
    font-size: 0.9em;
}

.c2s-booking__cta svg { flex: none; color: currentColor; }

/* ---- Visual 03 — Palette ---- */
.c2s-palette {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
}

.c2s-palette__swatch {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.c2s-palette__swatch--orange { background: var(--color-brand, #FF7122); }
.c2s-palette__swatch--dark   { background: #1B1B1B; border-color: rgba(0, 0, 0, 0.15); }
.c2s-palette__swatch--light  { background: #F5F5F2; border-color: rgba(0, 0, 0, 0.15); }

.c2s-palette__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1em;
    font-weight: 500;
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

/* ---- Visual 04 fusionné — Parcours & Tunnel de conversion.
   Chaque étape : label + compteur (rolling digits) + barre horizontale.
   À l'entrée en viewport, le chiffre monte (c2s-counter) EN MÊME TEMPS que
   la barre s'allonge de 0 → var(--w). Cascade row-by-row via JS
   (flow-reveal.js). Pas d'orange, tout en noir heading. ---- */
.c2s-flow {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

.c2s-flow__row {
    color: var(--color-heading);
    display: flex;
    flex-direction: column;
    gap: 0.45em;
}

.c2s-flow__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--14px-size);
    gap: 1em;
}

.c2s-flow__label {
    color: var(--color-body-light);
    letter-spacing: -0.005em;
}

.c2s-flow__pct {
    color: var(--color-heading);
    font-weight: 600;
    font-size: var(--20px-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

/* Track = rail gris constant · Bar = largeur animée de 0 → var(--w).
   Timing = même cubic-bezier & durée que le c2s-counter (1.4s). */
.c2s-flow__track {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(27, 27, 27, 0.12);
    border-radius: 1px;
    overflow: hidden;
}

.c2s-flow__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--color-heading);
    border-radius: 1px;
    transition: width 1.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.c2s-flow.is-animated .c2s-flow__row:nth-child(1) .c2s-flow__bar { width: var(--w); transition-delay: 0s; }
.c2s-flow.is-animated .c2s-flow__row:nth-child(2) .c2s-flow__bar { width: var(--w); transition-delay: 0.15s; }
.c2s-flow.is-animated .c2s-flow__row:nth-child(3) .c2s-flow__bar { width: var(--w); transition-delay: 0.30s; }
.c2s-flow.is-animated .c2s-flow__row:nth-child(4) .c2s-flow__bar { width: var(--w); transition-delay: 0.45s; }

/* ---- Globe — remplit les 5 cols × 2 rows (carré pixel-perfect sur la grille).
   La hauteur de .c2s-motion__methods est alignée sur la largeur de 5 cols,
   donc width:100% + aspect 1/1 (via .globe__before) tombent juste. */
.c2s-method--globe .globe {
    width: 100%;
    max-width: 100%;
    color: var(--color-heading);
    opacity: 0.9;
}

/* ---- Statement + Colonnes — 100vh RESTAURÉ pour que les wave-columns
   gardent leur prominence (avant les barres disparaissaient à cause du
   min-height:70vh trop court). Texte "Et des animations..." centré
   verticalement dedans. Le gap zéro avec Création au-dessus est
   garanti par padding:0 sur .c2s-motion__creation. ---- */
.c2s-motion__statement {
    position: relative;
    height: 100vh;
    margin-top: -150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.c2s-motion__statement-text {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--col);
}

.c2s-motion__statement-p {
    font-size: var(--48px-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-heading);
}

/* ---- Wave Columns — 12 barres sur les 12 cols pleins (col 1 incluse).
       Gap identique aux autres sections. Logique d'onde rethink :
       4 groupes de 3 barres qui cascadent gauche → droite (vague voyageuse),
       cf. wave-columns.js. ---- */
.c2s-motion__columns-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    overflow: hidden;
}

.c2s-motion__columns {
    width: 100%;
    height: 75%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: end;
}

.c2s-motion__bar {
    height: 100%;
    border: 1px solid var(--color-heading);
    border-radius: 0.5em 0.5em 0 0;
    transform-origin: center bottom;
    will-change: transform;
}

/* ============================================
   C2S × Zloop — Section IA (100vh)
   ============================================ */
.c2s-zloop {
    background-color: var(--color-heading);
    color: #fff;
    display: flex;
    align-items: center;
    padding-top: calc(var(--col) * 2);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-zloop__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: center;
}

/* Grille alignée exactement sur .c2s-accueil-tools en dessous :
   - Left  : cols 2 → 6 (span 5)
   - Gap   : col 7
   - Right : cols 8 → 11 (span 4)                                           */
.c2s-zloop__left {
    grid-column: 2 / span 5;
}

.c2s-zloop__right {
    grid-column: 8 / span 4;
    display: flex;
    align-items: center;
}

.c2s-zloop__eyebrow {
    font-size: var(--14px-size);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-6);
    display: block;
}

.c2s-zloop__title {
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-8);
    color: #fff;
}

.c2s-zloop__desc {
    font-size: var(--18px-size);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* ---- Réseau de neurones 3D (canvas, pilotage GSAP) ----
   Carré qui remplit exactement les 4 colonnes de droite (cols 8 → 11).
   Le graphe est une sphère, l'aspect-ratio 1:1 évite les marges inutiles. */
.c2s-zloop__neural {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.c2s-zloop__neural-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* ============================================
   Awards — Card Shuffle (+ Bio overlay)
   ============================================ */
.c2s-awards__bio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    width: 100%;
    max-width: 48em;
    padding: 0 var(--col);
}

.c2s-awards__bio .c2s-bio__eyebrow {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    display: block;
    margin-bottom: var(--space-4);
}

.c2s-awards__bio .c2s-bio__title {
    font-size: var(--48px-size);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin-bottom: var(--space-6);
}

.c2s-awards__bio .c2s-bio__desc {
    font-size: var(--18px-size);
    color: var(--color-body);
    line-height: 1.7;
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
}
.c2s-awards {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

.c2s-awards .pin-height {
    height: 500vh;
}

.c2s-awards .container {
    position: relative;
    height: 100vh;
}

.c2s-awards .circles {
    height: 100%;
}

.c2s-awards .circle {
    width: 250vw;
    height: 250vw;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    will-change: transform;
}

.c2s-awards .card {
    width: 22vw;
    aspect-ratio: 0.72;
    border-radius: 0.7vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 55vh);
    will-change: transform;
    overflow: hidden;
}

/* Par défaut : trophées CSS Awards → image pleine, pas de fond ni de padding
   (les PNG ont déjà leur propre transparence / composition). */
.c2s-awards .card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Certificat Google UX Design : fond 100 % blanc + padding pour respirer
   (l'original est un scan sur fond blanc, et on veut qu'il reste très lisible). */
.c2s-awards__card--google {
    background-color: #fff;
}

.c2s-awards__card--google img {
    padding: var(--space-4);
}

/* ============================================
   Outils SEO maison — override accueil
   Aligné sur la grille Van de Graaf de la page (pattern IA : 2/span 6 + 9/span 4)
   ============================================ */
.c2s-accueil-tools {
    padding-top: 0;
    padding-bottom: calc(var(--col) * 2);
}

/* Ré-aligne le container sur la grille globale (reset du padding-inline spécifique
   consultant-seo qui casse l'alignement colonne sur accueil). Spécificité renforcée
   (.c2s-accueil-tools.cseo-tools) pour battre .cseo-tools > .container. */
.c2s-accueil-tools.cseo-tools > .container {
    padding-inline: var(--space-6) !important;
}

/* Colonnes : éditeur à gauche (visuel), titre + description à droite. */
.c2s-accueil-tools .cseo-tools__grid {
    align-items: center;
}

/* Éditeur : -1 colonne (span 5 au lieu de 6), cols 2 → 6.
   Texte droite : décalé pour laisser 1 colonne de marge à droite
   (col 12 vide), cols 8 → 11. */
.c2s-accueil-tools .cseo-tools__editor-col {
    grid-column: 2 / span 5;
}

.c2s-accueil-tools .cseo-tools__content-col {
    grid-column: 8 / span 4;
}

/* Typographie alignée sur la section Automatisation & IA (var(--72px-size)). */
.c2s-accueil-tools .cseo-tools__title {
    font-size: var(--72px-size);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-8);
}

.c2s-accueil-tools .cseo-tools__desc {
    font-size: var(--18px-size);
    line-height: 1.6;
}

@media screen and (max-width: 991px) {
    .c2s-accueil-tools .cseo-tools__editor-col,
    .c2s-accueil-tools .cseo-tools__content-col {
        grid-column: 1 / -1;
    }

    .c2s-accueil-tools .cseo-tools__title {
        font-size: var(--48px-size);
    }
}

/* ============================================
   Approche + Services — override pour accueil
   ============================================ */
.c2s-page-accueil .cds-approach,
.c2s-page-accueil .cds-services {
    background-color: var(--color-bg);
    color: var(--color-heading);
}

.c2s-page-accueil .cds-services {
    padding-top: 0;
    padding-bottom: calc(var(--col) * 3);
}


/* ============================================
   Testimonials override
   ============================================ */
.c2s-page-accueil .cds-testimonials {
    background-color: var(--color-bg);
    color: var(--color-heading);
    border-top: 1px solid var(--color-border);
}

/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 991px) {
    .c2s-accueil-hero__title {
        /* Hero accueil "spécial" : on utilise la variable globale
           `--display-hero` (clamp 55-88px) qui garde un H1 imposant
           même sur smartphone. Voir global.css §1 :root. */
        font-size: var(--display-hero);
        max-width: 92vw;
        margin-inline: auto;
    }

    .c2s-accueil-hero__sub {
        max-width: 92vw;
        margin-inline: auto;
    }

    .c2s-accueil-hero__content {
        padding: 0 var(--container-px-mob);
        padding-top: 18vh;
    }

    /* Espacement avant la section "Création de site" : on garde uniquement
       le padding-bottom du lead pour aérer (le user a explicitement
       demandé 0 sur creation + methods, et 1 col sur creation-head). */
    .c2s-motion__lead {
        padding-bottom: calc(var(--col) * 2);
    }

    .c2s-motion__creation {
        padding-top: calc(var(--col) * 0);
    }

    .c2s-motion__creation-head {
        margin-bottom: calc(var(--col) * 1);
    }

    .c2s-motion__methods {
        padding-top: calc(var(--col) * 0);
    }

    .c2s-motion__lead-sentence {
        grid-column: 1 / -1;
        font-size: var(--48px-size);
    }

    .c2s-motion__lead-aside-p {
        grid-column: 1 / -1;
    }

    .c2s-motion__creation-head {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .c2s-motion__creation-title {
        grid-column: 1 / -1;
        font-size: var(--48px-size);
    }

    /* Cards méthodes : sur mobile/tablette on passe en UNE seule colonne
       (alignée sur la grille shift+G qui passe en 6 cols mais surtout
       pour réduire la densité visuelle = moins de cards qui s'empilent
       sur 2 colonnes). Chaque card prend toute la largeur du container. */
    .c2s-motion__methods {
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(var(--col) * 1);
        min-height: auto;
        max-width: 100%;
        min-width: 0;
    }


    .c2s-method,
    .c2s-method--cta,
    .c2s-method--booking,
    .c2s-method--design,
    .c2s-method--flow,
    .c2s-method--globe {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 14em;
        /* Quitter le subgrid 12-col pour grid auto-tracks 1-col, sinon
           les enfants en `grid-column: 1 / span 3` débordent. */
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    /* Cards 01 (Contact) et globe ("le monde qui bouge") : sur mobile la
       row 3 du subgrid passé en grid était en `1fr` (visual centré
       verticalement), ce qui créait un espace mort énorme entre le
       contenu et le tag. On collapse les rows en `auto auto auto auto`
       et on enlève le min-height des visual → tout le card est compact,
       le tag colle au visual. */
    .c2s-method--cta,
    .c2s-method--globe {
        min-height: auto;
        grid-template-rows: auto auto auto auto;
    }

    .c2s-method--cta .c2s-method__visual,
    .c2s-method--globe .c2s-method__visual {
        min-height: auto;
        align-items: flex-start;
        padding: 0;
    }

    /* Enfants internes des cards (num, title, visual, tag) : 100% de
       la card, jamais d'overflow. */
    .c2s-method > .c2s-method__num,
    .c2s-method > .c2s-method__title,
    .c2s-method > .c2s-method__visual,
    .c2s-method > .c2s-method__tag {
        grid-column: 1 / -1;
        min-width: 0;
        max-width: 100%;
    }

    /* Sur tablet on repasse tout en 1 col → le subgrid n'a qu'1 track,
       donc on force les visuels 02/04 à reprendre toute la largeur. */
    .c2s-method--booking .c2s-method__visual,
    .c2s-method--flow .c2s-method__visual {
        grid-column: 1 / -1;
    }

    .c2s-method--globe {
        grid-column: 1 / -1;
        min-height: 20em;
    }

    .c2s-method--globe .globe {
        width: 14em;
        height: 14em;
        max-width: 14em;
    }

    .c2s-method--globe .globe__before {
        display: block;
    }

    /* Wave Columns — tablette (768→991) : on s'aligne sur la grille
       shift+G qui passe en 6 cols à ce breakpoint. On cache 1 barre sur
       2 (CSS pairs) → reste 6 barres visibles sur 12. Le JS filtre
       maintenant les barres visibles et RECALCULE les phases sur 6 pour
       préserver la wave centrale symétrique (phases : π, 0.5π, 0, 0,
       0.5π, π). Le wave-columns.js gère seul les nouvelles phases. */
    .c2s-motion__columns {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1em;
        height: 65%;
    }

    .c2s-motion__bar:nth-child(even) {
        display: none;
    }

    .c2s-motion__statement-p {
        font-size: var(--34px-size);
    }

    .c2s-awards__bio .c2s-bio__title {
        font-size: var(--34px-size);
    }

    .c2s-awards .card {
        width: 35vw;
    }

    .c2s-zloop {
        height: auto;
        padding-top: calc(var(--col) * 2);
        padding-bottom: calc(var(--col) * 2);
    }

    .c2s-zloop__left  { grid-column: 1 / -1; }
    .c2s-zloop__right { grid-column: 1 / -1; }

    .c2s-zloop__title {
        font-size: var(--48px-size);
    }

    .c2s-zloop__neural {
        width: 100%;
        max-width: 22em;
        margin: var(--space-10) auto 0;
    }
}

@media screen and (max-width: 767px) {
    /* On laisse `--display-hero` (clamp 55-88px) gérer le H1 hero — pas
       d'override à 48px qui le rapetisserait trop sur smartphone. */

    .c2s-accueil-hero__sub {
        font-size: var(--16px-size);
    }

    .c2s-motion__lead-sentence {
        font-size: var(--34px-size);
    }

    .c2s-motion__creation-title {
        font-size: var(--34px-size);
    }

    /* .c2s-motion__methods : déjà en 1 col depuis le @media 991, pas
       besoin d'override ici. */

    .c2s-method--globe .globe {
        width: 35vw;
        height: 35vw;
        max-width: 35vw;
    }

    .c2s-method--globe .globe__before {
        display: block;
    }

    /* Wave Columns — mobile (≤767) : on s'aligne sur la grille shift+G
       qui passe en 4 cols à ce breakpoint. On cache 2 barres sur 3 et
       on ne montre que `:nth-child(3n+2)` (CSS index 2, 5, 8, 11 →
       4 barres réparties équidistantes). Le JS filtre les barres
       visibles et recalcule les phases sur count=4 → wave symétrique
       centrale (paire centrale en phase, paires extrêmes en opposition,
       phases : π, 0, 0, π). */
    .c2s-motion__columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1em;
        height: 60%;
    }

    .c2s-motion__bar {
        display: none;
    }

    .c2s-motion__bar:nth-child(3n+2) {
        display: block;
    }

    .c2s-motion__statement-p {
        font-size: var(--20px-size);
    }

    .c2s-awards .card {
        width: 55vw;
    }

    .c2s-zloop__title {
        font-size: var(--34px-size);
    }
}

@media screen and (max-width: 479px) {
    /* Hero H1 reste sur `--display-hero` : le `min` du clamp (3.4375rem =
       55px) garantit un titre toujours imposant même sur très petits
       smartphones, on ne le rapetisse plus à 34px. */

    .c2s-awards .card {
        width: 70vw;
    }
}