/* ganolyk.ca : l'article « Un coup d'avance » (se faire citer par les IA), 14 octobre 2026. Chargé sur cet article seulement, après v10.css.
   Haut de page sombre avec le roi corail, trois chiffres, le plateau « comment une IA choisit », coups nommés (jamais numérotés),
   avant/après, questions à copier, gaffes, liste à cocher, sources. Tout reste complet et lisible sans JavaScript; « moins d'animations » : rien ne bouge. */

/* ---------- Le haut de page : empilé sur cellulaire et tablette, image en fond sur grand écran ---------- */
.ia-tete{position:relative;display:flex;flex-direction:column;background:#120f0d;color:var(--craie);overflow:hidden;isolation:isolate}
@supports (overflow:clip){.ia-tete{overflow:clip}}
.ia-tete .ia-fond{position:relative;z-index:-2;order:-1;margin:0;height:clamp(260px,72vw,520px)}
.ia-tete .ia-fond img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 34%}
.ia-tete .ia-fond::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(rgba(18,15,13,0),#120f0d)}
.ia-tete .g{margin-top:-64px;padding-bottom:clamp(40px,6vw,64px)}
.ia-tete .texte{max-width:760px}
.ia-tete .fil{color:#cfc8c1;margin-bottom:0}
.ia-tete .fil a{color:var(--craie);border-color:currentColor}
.ia-tete h1{margin:16px 0 0;color:var(--craie);letter-spacing:normal;line-height:1}
.ia-tete .h1-coup{display:block;font-size:clamp(56px,calc(11 * var(--vw,1vw)),148px);font-weight:900;line-height:.88;letter-spacing:-.05em}
.ia-tete .h1-coup em{font-style:normal;color:var(--corail)}
.ia-tete .h1-suite{display:block;margin-top:clamp(16px,2vw,26px);font-size:clamp(22px,calc(2.4 * var(--vw,1vw)),36px);font-weight:800;line-height:1.12;letter-spacing:-.02em;max-width:22em;text-wrap:balance}
.ia-tete .chapeau{margin:clamp(20px,2.4vw,30px) 0 0;color:#e2dcd5;max-width:44ch}
.ia-tete .meta-article{margin:20px 0 0;font-size:15px;color:#bfb7af}
.ia-tete .actions{margin-top:26px}
.ia-tete .btn{border-color:var(--craie);box-shadow:0 3px 0 #000}
.ia-tete .btn-ligne{color:var(--craie)}
.ia-tete .btn-ligne:hover{background:var(--craie);color:var(--encre)}
.ia-tete :focus-visible{outline-color:var(--jaune)}
@media (min-width:1024px){
  .ia-tete{display:block}
  .ia-tete .ia-fond{position:absolute;inset:0;height:auto}
  .ia-tete .ia-fond::after{content:none}
  .ia-tete .ia-fond img{object-position:78% 40%}
  .ia-tete::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#120f0d 0%,rgba(18,15,13,.93) 34%,rgba(18,15,13,.55) 50%,rgba(18,15,13,0) 64%)}
  .ia-tete .g{margin-top:0;min-height:clamp(600px,calc(100svh - var(--entete) - 60px),860px);align-content:center;padding-block:clamp(56px,6vw,104px)}
  .ia-tete .texte{max-width:min(760px,58%)}
}
@media (min-width:1024px) and (max-width:1199px){.ia-tete .h1-coup{font-size:clamp(56px,calc(9.2 * var(--vw,1vw)),148px)}}

/* ---------- Trois chiffres ---------- */
.ia-bande{padding-top:clamp(44px,5vw,80px)}
.ia-chiffres{list-style:none;margin:0;padding:0;display:grid;gap:28px;border-top:2px solid var(--encre)}
.ia-chiffres li{padding-top:22px}
.ia-chiffres b{display:block;font-size:clamp(50px,calc(6 * var(--vw,1vw)),88px);font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--encre)}
.ia-chiffres b em{font-style:normal;color:var(--corail)}
.ia-chiffres span{display:block;margin-top:12px;font-size:17px;line-height:1.45;color:var(--encre-2);max-width:34ch}
.ia-chiffres small{display:block;margin-top:10px;font-size:13px;color:var(--encre-2)}
.ia-chiffres small a{color:inherit;text-decoration:underline;text-decoration-color:var(--beton);text-underline-offset:3px}
.ia-chiffres small a:hover{text-decoration-color:var(--corail)}
@media (min-width:860px){.ia-chiffres{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gout)}}

/* ---------- Texte courant ---------- */
.prose code{font:600 .86em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--beton);border-radius:4px;padding:1px 5px;white-space:nowrap}
.prose .ouverture-recit{font-size:clamp(19px,calc(1.5 * var(--vw,1vw)),22px);line-height:1.55}
.prose .ouverture-recit::first-letter{float:left;font-size:3.7em;line-height:.8;font-weight:900;color:var(--corail);margin:.05em .08em 0 0}

/* ---------- Les coups : titre de section avec sa pièce, jamais de numéro ---------- */
.prose .h-coup{margin-top:clamp(64px,7vw,104px)}
.prose .h-coup .coup{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;margin:0 0 18px;padding:6px 16px 6px 8px;border:1.5px solid var(--encre);border-radius:999px;background:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1.2}
.prose .h-coup .coup svg{width:24px;height:24px;flex:none;color:var(--corail)}
.prose .regle{margin:24px 0;padding:18px 20px;border-left:4px solid var(--corail);background:#fff}
.prose .regle p{margin:0}

/* ---------- Le plateau : le trajet d'une question, case par case ---------- */
.prose .plateau{margin:clamp(28px,3vw,40px) 0;padding:clamp(20px,3vw,32px);background:#fff;border:2px solid var(--encre);box-shadow:8px 8px 0 var(--encre)}
.prose .plateau .plateau-titre{margin:0 0 22px;font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--encre-2)}
.prose .plateau ol{list-style:none;margin:0;padding:0}
.prose .plateau li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;margin:0;padding:0 0 24px}
.prose .plateau li:last-child{padding-bottom:0}
.prose .plateau li:not(:last-child)::after{content:"";position:absolute;left:25px;top:58px;bottom:6px;width:2px;background:repeating-linear-gradient(var(--corail) 0 6px,transparent 6px 11px)}
.prose .plateau .case{grid-row:1/3;width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--encre);background:var(--craie);color:var(--encre)}
.prose .plateau li:nth-child(even) .case{background:var(--encre);color:var(--craie)}
.prose .plateau li.cite .case{background:var(--corail);color:var(--encre)}
.prose .plateau .case svg{width:26px;height:26px}
.prose .plateau li b{display:block;margin:3px 0 3px;font-size:18px;font-weight:800;color:var(--encre)}
.prose .plateau li .t{display:block;font-size:16px;line-height:1.45;color:var(--encre-2)}
.prose .plateau li.cite .t strong{color:var(--encre);background:linear-gradient(transparent 58%,rgba(237,90,57,.38) 58%)}

/* ---------- Qui est qui : les robots ---------- */
.prose .table-robots{margin:26px 0}
.prose .table-robots table{margin:0;font-size:16px}
.prose .table-robots thead th{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--encre-2);vertical-align:bottom}
.prose .table-robots tbody th{font-weight:800}
.prose .table-robots tbody th small{display:block;font-size:13px;font-weight:500;color:var(--encre-2)}
.prose .table-robots td code{white-space:normal}
.prose .table-robots td small{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--encre-2)}
.prose .table-robots td:nth-child(2) code{border-color:var(--corail)}
@media (max-width:599px){
  .prose .table-robots table,.prose .table-robots tbody{display:block}
  .prose .table-robots thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .prose .table-robots tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;padding:12px 0;border-bottom:1px solid var(--beton)}
  .prose .table-robots tr:first-child{border-top:2px solid var(--encre)}
  .prose .table-robots th,.prose .table-robots td{padding:0;border:0}
  .prose .table-robots tbody th{grid-column:1/-1;margin-bottom:8px}
  .prose .table-robots tbody th small{display:inline;margin-left:6px}
  .prose .table-robots td::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12px;font-weight:700;color:var(--encre-2)}
}
.prose pre.robots{margin:18px 0;padding:16px 18px;background:var(--encre);color:#efe9e3;font:500 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.prose pre.robots em{font-style:normal;color:#f59a83}

/* ---------- Avant / après ---------- */
.avant-apres{display:grid;gap:16px;margin:26px 0}
@media (min-width:700px){.avant-apres{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
.avant-apres>div{position:relative;padding:18px 20px 22px;border:2px solid var(--encre);background:#fff}
.avant-apres .avant{background:transparent;border-style:dashed;border-color:#8f877f}
.avant-apres .apres{box-shadow:7px 7px 0 var(--corail)}
.avant-apres .aa-tag{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;font-size:14px;font-weight:800;color:var(--encre-2)}
.avant-apres .nota{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.06em;color:var(--corail);cursor:help}
.avant-apres .avant .nota{color:#8f877f}
.avant-apres .aa-texte{margin:0;font-size:clamp(18px,calc(1.4 * var(--vw,1vw)),20px);line-height:1.45;font-weight:650;color:var(--encre)}
.avant-apres .avant .aa-texte{font-weight:500;color:var(--encre-2)}

/* ---------- « Essayez-le ce soir » : les questions à copier ---------- */
.prose .essai{margin:clamp(28px,3vw,40px) 0;padding:clamp(20px,3vw,32px);background:var(--encre);color:var(--craie);scroll-margin-top:calc(var(--entete) + 16px)}
.prose .essai h3{margin:0 0 6px;font-size:clamp(24px,2.4vw,32px);color:var(--craie)}
.prose .essai>p{margin:0 0 16px;color:#d9d3cc}
.prose .essai ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prose .essai li{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0;padding:12px 14px;background:#1f1b18;border-left:3px solid var(--corail)}
.prose .essai li::before{content:none}
.prose .essai q{quotes:none;font-weight:700;line-height:1.4}
.prose .essai button{flex:none;appearance:none;min-height:40px;border:1.5px solid var(--craie);background:transparent;color:var(--craie);font:700 14px Figtree,sans-serif;padding:8px 14px;border-radius:999px;cursor:pointer}
.prose .essai button:hover{background:var(--craie);color:var(--encre)}
.prose .essai button[data-ok]{border-color:var(--corail);background:transparent;color:#f59a83}
.prose .essai :focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.prose .essai .essai-fin{margin:16px 0 0;font-size:16px}
.no-js .essai button{display:none}
@media (max-width:479px){.prose .essai{margin-inline:calc(var(--marge) * -1);padding-inline:var(--marge)}.prose .essai li{flex-direction:column;align-items:flex-start}}

/* ---------- Les gaffes (??) ---------- */
.prose .gaffes{margin:22px 0;border-top:2px solid var(--encre)}
.prose .gaffes>li{position:relative;margin:0;padding:18px 0 20px 64px;border-bottom:1px solid var(--beton)}
.prose .gaffes>li::before{content:"??";position:absolute;left:0;top:14px;width:auto;height:auto;border-radius:0;background:none;font-size:36px;font-weight:900;line-height:1;letter-spacing:-.06em;color:var(--corail)}
.prose .gaffes p{margin:0}
.prose .gaffes .g-mythe{margin-bottom:6px;font-size:clamp(19px,calc(1.5 * var(--vw,1vw)),21px);font-weight:800;line-height:1.3;color:var(--encre)}

/* ---------- La liste à cocher ---------- */
.prose .liste-coups{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--encre)}
.prose .liste-coups>li{margin:0;padding:0;border-bottom:1px solid var(--beton)}
.prose .liste-coups>li::before{content:none}
.liste-coups label{display:flex;gap:14px;align-items:flex-start;padding:14px 0;cursor:pointer;line-height:1.45}
.liste-coups input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--encre);border-radius:4px;background:#fff;display:grid;place-items:center;cursor:pointer}
.liste-coups input::before{content:"";width:12px;height:7px;border-left:3px solid var(--craie);border-bottom:3px solid var(--craie);transform:translate(0,-1px) rotate(-45deg);opacity:0}
.liste-coups input:checked{background:var(--corail);border-color:var(--corail)}
.liste-coups input:checked::before{opacity:1;border-color:var(--encre)}
.liste-coups input:checked+span{color:var(--encre-2);text-decoration:line-through;text-decoration-color:var(--corail);text-decoration-thickness:2px}
.liste-coups input:focus-visible{outline:3px solid var(--corail);outline-offset:2px}
.prose .compte-coups{margin-top:16px;font-weight:800}

/* ---------- Sources ---------- */
.prose .h-sources{margin-top:clamp(64px,6vw,88px);padding-top:28px;border-top:2px solid var(--encre);font-size:clamp(26px,calc(2.2 * var(--vw,1vw)),32px);letter-spacing:-.02em}
.prose .sources-intro{font-size:15px;color:var(--encre-2)}
.prose .sources{font-size:15px;line-height:1.5}
.prose .sources>li{margin:.45em 0;color:var(--encre-2)}
.prose .sources a{color:var(--encre)}

/* ---------- Mouvement (sous .js, jamais si « moins d'animations ») ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .ia-tete .ia-fond img{animation:ia-pose 6s cubic-bezier(.2,.7,.2,1) both}
  .js .ia-tete .h1-coup{animation:ia-monte .9s cubic-bezier(.2,.8,.2,1) .1s both}
}
@keyframes ia-pose{from{transform:scale(1.07)}to{transform:none}}
@keyframes ia-monte{from{transform:translateY(18px)}to{transform:none}}