/* ---------------------------------------------------------------------------
   Nuage Rose · titres.css · cinq dispositions du titre d'accueil.
   S'essaient sur le site entier avec ?titre=1..5, comme ?police= et ?theme=.
   Sans le paramètre, rien ne change : la disposition d'origine reste en place.

   🚨 Le mot d'accent est peint en `background-clip: text`, donc uniquement
   dans sa boîte : chaque variante qui rend le fond visible doit remettre
   `background-clip: border-box` ET redonner une couleur au texte, sinon on
   obtient un mot transparent sur un bandeau.
   🚨 `.ln` est en `overflow: hidden` pendant l'animation d'entrée : tout ce
   qui déborde (bandeau, souligné) n'apparaît qu'une fois `.is-done` posé.
   --------------------------------------------------------------------------- */

html[data-titre] h1 .pop { text-shadow: none; }

/* 1 · Surligneur : une bande passée au feutre derrière le mot, texte intact */
html[data-titre="1"] h1 .pop {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--txt); position: relative; z-index: 0;
}
html[data-titre="1"] h1 .pop::before {
  content: ''; position: absolute; z-index: -1;
  left: -.04em; right: -.02em; top: .26em; bottom: .3em;
  background: var(--pop); opacity: .82; border-radius: .06em;
  transform: rotate(-1.1deg) skewX(-3deg);
}

/* 2 · Échelle : le mot devient l'image, le reste passe en légende au-dessus */
html[data-titre="2"] .hero h1 { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.12; }
html[data-titre="2"] .hero h1 .ln:last-child {
  font-size: clamp(54px, 10.4vw, 168px); line-height: .88; margin-top: .1em;
  padding-bottom: .24em; margin-bottom: -.24em;
}
html[data-titre="2"] .hero h1 .ln:not(:last-child) > span { opacity: .78; letter-spacing: .01em; }

/* 3 · Souligné dessiné : un trait épais et un peu de travers, sous le mot */
html[data-titre="3"] h1 .pop {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--pop-2); position: relative;
}
html[data-titre="3"] h1 .pop::after {
  content: ''; position: absolute; left: -.01em; right: .02em; bottom: .12em; height: .095em;
  background: var(--pop-grad); border-radius: .08em; transform: rotate(-.7deg);
}

/* 4 · Dégradé de lignes : la couleur monte, ligne après ligne, jusqu'à l'accent */
html[data-titre="4"] h1 .ln:nth-child(1) > span { color: var(--txt); }
html[data-titre="4"] h1 .ln:nth-child(2) > span { color: color-mix(in srgb, var(--pop-2) 72%, var(--txt)); }
html[data-titre="4"] h1 .pop { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 5 · Pastille : le mot dans une pilule pleine, le langage des boutons du site */
html[data-titre="5"] h1 .pop {
  background: var(--pop-grad); -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--bg); border-radius: 999px;
  padding: .08em .34em .2em; margin: 0 0 0 -.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-titre="5"] h1 .ln:last-child { margin-top: .14em; padding-bottom: .3em; margin-bottom: -.3em; }

/* le nom de la variante, en bas à gauche, seulement avec ?titre= */
html[data-titre] body::before {
  content: attr(data-titre-nom); position: fixed; left: 14px; bottom: 14px; z-index: 95;
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff; background: rgba(14,14,17,.66); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset; pointer-events: none;
}

/* ===========================================================================
   6 à 15 · celles qui changent la COMPOSITION, pas seulement la couleur du mot.
   =========================================================================== */

/* le mot barré ne sert qu'à la variante 11 */
h1 .corr { display: none; }

/* 6 · Plein centre : le titre au milieu de l'écran, tout aligné au centre */
html[data-titre="6"] .hero-pin { align-content: center; align-items: center; }
html[data-titre="6"] .hero-txt { text-align: center; padding-bottom: 0; width: 100%; }
html[data-titre="6"] .hero h1 { align-items: center; }
html[data-titre="6"] .cta-row { justify-content: center; }

/* 7 · Une seule ligne : la phrase traverse l'écran d'un bord à l'autre.
   ⚠️ Mesuré : à 6,6vw la phrase réclamait 1576 px pour 1296 disponibles et
   « winneuse. » sortait du cadre. 5,1vw la fait tenir pile.
   🚨 Composition d'ordinateur : sur un téléphone, une seule ligne tomberait à
   21 px de haut. Sous 960 px, on revient aux trois lignes. */
@media (min-width: 961px) {
  html[data-titre="7"] .hero h1 { display: block; font-size: clamp(38px, 5.1vw, 96px); white-space: nowrap; line-height: 1.06; }
  html[data-titre="7"] .hero h1 .ln { display: inline-block; vertical-align: baseline; }
  html[data-titre="7"] .hero h1 .ln + .ln { margin-left: .2em; }
  html[data-titre="7"] .hero-txt { width: 100%; }
}

/* 8 · Diagonale : la phrase commence en haut à gauche et finit en bas à droite */
html[data-titre="8"] .hero-txt { width: 100%; }
html[data-titre="8"] .hero h1 { align-items: flex-start; }
html[data-titre="8"] .hero h1 .ln:last-child {
  align-self: flex-end; font-size: clamp(54px, 9.6vw, 168px); margin-top: .06em;
  padding-bottom: .24em; margin-bottom: -.24em;
}

/* 9 · Bandeau : la dernière ligne sur une bande pleine, d'un bord à l'autre */
html[data-titre="9"] .hero-txt { width: 100%; }
html[data-titre="9"] .hero h1 .ln:last-child {
  background: var(--pop-grad); align-self: stretch;
  margin-left: calc(-1 * var(--gut)); padding-left: var(--gut);
  margin-right: calc(-1 * var(--gut)); padding-right: var(--gut);
  padding-top: .1em; padding-bottom: .26em; margin-bottom: -.1em;
}
html[data-titre="9"] h1 .pop {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--bg); -webkit-text-fill-color: var(--bg);
}

/* 10 · Escalier : chaque ligne décalée vers la droite */
html[data-titre="10"] .hero h1 .ln:nth-child(2) { margin-left: .7em; }
html[data-titre="10"] .hero h1 .ln:nth-child(3) { margin-left: 1.4em; }

/* 11 · Correction de montage : le mot faible barré, remplacé par le bon */
html[data-titre="11"] h1 .corr {
  display: inline; margin-right: .22em; color: var(--txt-3);
  -webkit-text-fill-color: var(--txt-3);
  text-decoration: line-through; text-decoration-thickness: .055em;
  text-decoration-color: var(--pop);
}
html[data-titre="11"] .hero h1 .ln:last-child { font-size: .78em; }

/* 12 · Chiffre en filigrane : le 117 des pubs livrées, en creux derrière le titre */
html[data-titre="12"] .hero-txt { position: relative; }
html[data-titre="12"] .hero-txt::before {
  content: '117'; position: absolute; z-index: -1; right: 4%; top: -14%;
  font-size: clamp(180px, 30vw, 520px); font-weight: 900; line-height: .78; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(245,241,234,.16); pointer-events: none;
}

/* 13 · Affiche : le titre en bas, l'appel à l'action au-dessus */
html[data-titre="13"] .hero-txt { display: flex; flex-direction: column-reverse; align-items: flex-start; padding-bottom: 52px; width: 100%; }
html[data-titre="13"] .hero h1 { font-size: clamp(40px, 7.4vw, 124px); }
html[data-titre="13"] .cta-row { margin: 0 0 30px; }

/* 14 · Encadré : un cadre tient les deux premières lignes, le mot en sort */
html[data-titre="14"] .hero h1 { position: relative; padding: .3em .52em .06em; margin-left: -.52em; }
html[data-titre="14"] .hero h1::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: .9em;
  border: 2px solid rgba(245,241,234,.34); border-radius: 20px; pointer-events: none;
}
html[data-titre="14"] .hero h1 .ln:last-child { margin-left: 1.2em; }

/* 15 · Renversé : le mot d'abord, la phrase devient une signature dessous */
html[data-titre="15"] .hero h1 .ln:last-child {
  order: -1; font-size: clamp(52px, 9.4vw, 164px); line-height: .92;
  padding-bottom: .24em; margin-bottom: -.16em;
}
html[data-titre="15"] .hero h1 .ln:not(:last-child) { font-size: clamp(19px, 2.1vw, 30px); line-height: 1.24; }
html[data-titre="15"] .hero h1 .ln:not(:last-child) > span { opacity: .82; }

/* ===========================================================================
   16 à 20 · cinq façons de surligner le mot. Même géométrie pour toutes,
   seule la peinture change : dégradé, transparence, matière, contour.
   =========================================================================== */

/* base commune : le mot reste crème, la bande se range derrière */
html[data-titre="16"] h1 .pop, html[data-titre="17"] h1 .pop,
html[data-titre="18"] h1 .pop, html[data-titre="19"] h1 .pop,
html[data-titre="20"] h1 .pop {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--txt); -webkit-text-fill-color: var(--txt);
  position: relative; z-index: 0;
}
html[data-titre="16"] h1 .pop::before, html[data-titre="17"] h1 .pop::before,
html[data-titre="18"] h1 .pop::before, html[data-titre="19"] h1 .pop::before,
html[data-titre="20"] h1 .pop::before {
  content: ''; position: absolute; z-index: -1;
  left: -.05em; right: -.03em; top: .25em; bottom: .3em;
}

/* 16 · Dégradé plein : c'est devenu la version du site, voir style.css.
   La règle reste pour que ?titre=16 continue de fonctionner à l'identique. */
html[data-titre="16"] h1 .pop::before { background: var(--pop-grad); border-radius: .05em; }

/* 17 · Verre teinté : la vidéo transparaît à travers une bande très légère */
html[data-titre="17"] h1 .pop::before {
  background: color-mix(in srgb, var(--pop) 30%, transparent);
  backdrop-filter: blur(9px) saturate(1.2); border-radius: .12em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pop) 34%, transparent) inset;
}

/* 18 · Feutre : deux passages superposés, bords inégaux, comme une vraie main */
html[data-titre="18"] h1 .pop::before {
  background: var(--pop); opacity: .6; mix-blend-mode: normal;
  border-radius: .3em .08em .26em .1em; transform: rotate(-1.3deg) skewX(-4deg);
  left: -.07em; right: -.05em; top: .28em; bottom: .28em;
}
html[data-titre="18"] h1 .pop::after {
  content: ''; position: absolute; z-index: -1;
  left: .02em; right: -.09em; top: .4em; bottom: .3em;
  background: var(--pop-2); opacity: .42;
  border-radius: .1em .28em .1em .24em; transform: rotate(.9deg) skewX(3deg);
}

/* 19 · Estompé : pleine à gauche, elle se dissout vers la droite */
html[data-titre="19"] h1 .pop::before {
  background: linear-gradient(90deg, var(--t1) 0%, color-mix(in srgb, var(--pop) 78%, transparent) 46%, transparent 100%);
  border-radius: .05em 0 0 .05em; right: -.3em;
}

/* 20 · Cerné : pas de fond, un trait tracé autour du mot */
html[data-titre="20"] h1 .pop::before {
  background: none; border: .055em solid var(--pop); border-radius: .42em;
  transform: rotate(-.9deg); left: -.09em; right: -.07em; top: .2em; bottom: .24em;
}

/* ===========================================================================
   Couleurs du titre · ?tcoul=1..8
   Deux variables suffisent : --titre-lignes pour « Du rush brut / à la pub »,
   --titre-mot pour le mot posé sur la bande. Toutes les valeurs sortent de la
   palette Framboise nuit, celle de la charte. Rien d'inventé.
   =========================================================================== */
html[data-tcoul="1"] { --titre-lignes: #F5F1EA; --titre-mot: #F5F1EA; }   /* crème, l'actuelle */
html[data-tcoul="2"] { --titre-lignes: #F5F0E4; --titre-mot: #F5F0E4; }   /* papier, plus chaud */
html[data-tcoul="3"] { --titre-lignes: #EFC6CF; --titre-mot: #F5F1EA; }   /* lignes rose poudré */
html[data-tcoul="4"] { --titre-lignes: #D49AA6; --titre-mot: #F5F1EA; }   /* lignes rose */
html[data-tcoul="5"] { --titre-lignes: #F5F1EA; --titre-mot: #26282C; }   /* mot en encre sur la bande */
html[data-tcoul="6"] { --titre-lignes: #B7A39A; --titre-mot: #F5F1EA; }   /* lignes taupe rosé */
html[data-tcoul="7"] { --titre-lignes: #F5F1EA; --titre-mot: #F5F0E4; }   /* crème, mot papier */
html[data-tcoul="8"] { --titre-lignes: #C0607F; --titre-mot: #F5F1EA; }   /* lignes framboise profond */

/* 7 bis · les lignes en dégradé, du crème au rose poudré */
html[data-tcoul="9"] h1 .ln > span:not(.pop) {
  background: linear-gradient(100deg, #F5F1EA, #EFC6CF);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
}

/* le nom de la teinte, en bas à droite pour ne pas croiser celui de la variante */
html[data-tcoul] body::after {
  content: attr(data-tcoul-nom); position: fixed; right: 14px; bottom: 14px; z-index: 95;
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff; background: rgba(14,14,17,.66); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset; pointer-events: none;
}