/* innovation-imprimerie.com — « Grand Format », le guide de l'impression.
   Structure inspirée d'It's Nice That (code maison) : blanc, noir, blocs de couleur franche par rubrique (orange, bleu, vert),
   titres grotesques, texte serif éditorial. Polices : Space Grotesk (titres, interface), Literata (texte). */
:root{
  --noir:#141414; --texte:#2b2b2b; --gris:#6f6f6f; --ligne:#e6e6e6; --fond:#ffffff; --clair:#f5f4f0; --papier:#fbf8f1;
  --orange:#ff5a36; --bleu:#2f6fed; --vert:#1c9a6c; --jaune:#ffd23f;
  --titre:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --corps:"Literata",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 18px/1.7 var(--corps)}
img{max-width:100%;height:auto;display:block}
a{color:var(--noir);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--orange)}
.large{max-width:1280px;margin:0 auto;padding:0 32px}
.etroit{max-width:760px;margin:0 auto;padding:0 28px}
.centre{text-align:center}
h1,h2,h3{font-family:var(--titre);color:var(--noir);font-weight:500;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(36px,4.8vw,62px);margin:.15em 0 .35em}
h2{font-size:clamp(26px,2.6vw,36px);margin:1.8em 0 .5em}
h3{font-size:22px;margin:1.5em 0 .4em}
.surtitre{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin:0 0 14px}

/* en-tête */
.entete{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--noir)}
.entete-in{display:flex;align-items:center;gap:24px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--noir)}
.logo:hover{color:var(--noir)}
.logo-marque{display:grid;grid-template-columns:repeat(2,11px);gap:2px}
.logo-marque i{display:block;width:11px;height:11px}
.logo-marque i:nth-child(1){background:#00a3e0}.logo-marque i:nth-child(2){background:#e5007e}.logo-marque i:nth-child(3){background:#ffe500}.logo-marque i:nth-child(4){background:var(--noir)}
.logo-mot{font:700 25px/1 var(--titre);letter-spacing:-.04em}
.entete-baseline{font:400 13.5px/1.3 var(--titre);color:var(--gris);margin:0;max-width:260px}
.menu{margin-left:auto}
.menu ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.menu a{font:500 15px/1 var(--titre);text-decoration:none;color:var(--noir)}
.menu a:hover{color:var(--orange)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--noir);margin:5px 0}

/* fil « derniers guides » */
.fil{background:var(--clair);border-bottom:1px solid var(--ligne)}
.fil-in{display:grid;grid-template-columns:150px repeat(3,1fr);gap:22px;align-items:center;padding:14px 0}
.fil-titre{font:500 13px/1.2 var(--titre);text-transform:uppercase;letter-spacing:.1em;margin:0}
.fil-item{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--noir);font:500 15px/1.25 var(--titre)}
.fil-item img{width:70px;height:52px;object-fit:cover;flex:0 0 70px}
.fil-item span{display:flex;flex-direction:column;gap:3px}
.fil-item:hover{color:var(--orange)}

/* héros */
.heros{padding:62px 0 40px}
.heros h1{max-width:1000px}
.heros-sous{font-size:21px;line-height:1.5;color:var(--texte);max-width:780px;margin:0}
.heros-rub{background:var(--c,var(--noir));color:#fff;padding:46px 0 52px}
.heros-rub h1,.heros-rub .heros-sous{color:#fff}
.heros-rub .surtitre{color:rgba(255,255,255,.8)}
.heros-rub .ariane,.heros-rub .ariane a{color:rgba(255,255,255,.85)}
.ariane{font:400 14px/1.3 var(--titre);color:var(--gris);margin-bottom:18px}
.ariane a{color:var(--gris)}
.ariane .sep{margin:0 8px;opacity:.6}

/* à la une : bloc de couleur pleine */
.une{display:grid;grid-template-columns:1fr 1fr;background:var(--c,var(--orange));text-decoration:none;color:#fff;min-height:420px}
.une:hover{color:#fff}
.une-texte{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:48px}
.une-kicker{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.12em}
.une-titre{font:500 clamp(30px,3.4vw,48px)/1.05 var(--titre);letter-spacing:-.03em}
.une-deck{font-size:18px;line-height:1.5}
.une-img img{width:100%;height:100%;object-fit:cover}
.lien-fleche{font:500 16px/1 var(--titre)}
.lien-fleche::after{content:" →"}

/* tuiles rubriques */
.tuiles-rub{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--noir);border-bottom:1px solid var(--noir)}
.tuile-rub{display:flex;flex-direction:column;gap:10px;padding:28px 28px 30px;text-decoration:none;color:var(--noir);border-right:1px solid var(--noir);transition:background .25s,color .25s}
.tuile-rub:last-child{border-right:0}
.tuile-rub:hover{background:var(--c);color:#fff}
.tuile-num{font:500 14px/1 var(--titre);color:var(--c)}
.tuile-rub:hover .tuile-num{color:#fff}
.tuile-nom{font:500 30px/1.05 var(--titre);letter-spacing:-.03em}
.tuile-acc{font-size:15.5px;line-height:1.5}

/* sections */
.section{padding:64px 0}
.section.serre{padding:36px 0}
.bande-claire{background:var(--papier);border-top:1px solid var(--ligne)}
.tete-rub{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:4px solid var(--c,var(--noir));padding-top:14px;margin-bottom:10px}
.tete-rub h2{margin:0;font-size:34px}
.voir-tout{font:500 15px/1 var(--titre);text-decoration:none;color:var(--noir)}
.voir-tout::after{content:" →"}
.voir-tout:hover{color:var(--c,var(--orange))}
.rub-accroche{color:var(--gris);max-width:760px;margin:0 0 28px;font-size:16.5px}

/* cartes */
.grille{display:grid;gap:30px 26px}
.grille.trois{grid-template-columns:repeat(3,1fr)}
.grille.quatre{grid-template-columns:repeat(4,1fr)}
.carte{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--noir)}
.carte-img{overflow:hidden}
.carte-img img,.carte-vide{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--clair);transition:transform .5s}
.carte:hover .carte-img img{transform:scale(1.03)}
.carte-vide{display:block}
.carte-rub{align-self:flex-start;display:inline-block;font:500 12px/1 var(--titre);text-transform:uppercase;letter-spacing:.08em;color:var(--c,var(--noir));border:1px solid currentColor;border-radius:99px;padding:5px 10px 4px;text-decoration:none}
.carte-titre{font:500 22px/1.15 var(--titre);letter-spacing:-.02em}
.carte:hover .carte-titre{text-decoration:underline;text-decoration-thickness:2px}
.carte-deck{font-size:15px;line-height:1.5;color:var(--gris)}
.a-lire{margin:34px 0;padding:24px 0;border-top:1px solid var(--noir);border-bottom:1px solid var(--noir)}
.a-lire-titre{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.1em;margin:0 0 18px}
.a-lire .carte-titre{font-size:18px}
.a-lire .carte-deck{display:none}

/* guide + article */
.guide-grille{display:grid;grid-template-columns:250px minmax(0,1fr);gap:60px;align-items:start}
.article-grille{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:70px;align-items:start;padding-top:44px;padding-bottom:40px}
.guide-cote,.article-cote{position:sticky;top:96px}
.sommaire{border-top:4px solid var(--noir);padding-top:14px}
.sommaire-titre{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.sommaire ol{list-style:none;margin:0;padding:0;counter-reset:s}
.sommaire li{counter-increment:s;margin:0 0 10px;font:400 15px/1.35 var(--titre)}
.sommaire a{text-decoration:none;color:var(--texte);display:flex;gap:10px}
.sommaire a::before{content:counter(s,decimal-leading-zero);color:var(--gris)}
.sommaire a.actif,.sommaire a:hover{color:var(--orange)}
.avertissement{margin-top:26px;font:400 14px/1.45 var(--titre);color:var(--gris);border-top:1px solid var(--ligne);padding-top:14px}
.avertissement p{margin:0}
.texte{max-width:740px;min-width:0}
.texte p,.texte li{font-size:18.5px}
.texte .chapo,.chapo{font:400 23px/1.5 var(--corps);color:var(--noir);margin:0 0 1.3em}
.article-tete{padding:42px 0 44px;border-bottom:1px solid var(--noir)}
.article-tete-grille{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.article-deck{font:400 22px/1.5 var(--corps);color:var(--texte);margin:0 0 22px}
.article-meta{font:400 14.5px/1.5 var(--titre);color:var(--gris)}
.article-meta a{color:var(--noir)}
.etiquettes{margin-top:14px}
.article-img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.retenir{background:var(--jaune);padding:24px 28px;margin:0 0 34px}
.retenir-titre{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px;color:var(--noir)}
.retenir ul{margin:0;padding-left:20px}
.retenir li{font-size:17px;margin:0 0 6px}
.tableau{overflow-x:auto;margin:28px 0;border-top:2px solid var(--noir);border-bottom:2px solid var(--noir)}
.tableau table{border-collapse:collapse;width:100%;font:400 15.5px/1.45 var(--titre)}
.tableau th{text-align:left;font-weight:500;padding:12px 14px;border-bottom:1px solid var(--noir);text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.tableau td{padding:11px 14px;border-top:1px solid var(--ligne);vertical-align:top}
.encadre{display:flex;gap:16px;background:var(--clair);border-left:5px solid var(--orange);padding:20px 22px;margin:28px 0}
.encadre-num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font:700 17px/32px var(--titre);text-align:center}
.encadre h3{margin:0 0 6px;font-size:20px}
.encadre p:last-child{margin-bottom:0}
.faq details{border-bottom:1px solid var(--noir);padding:4px 0}
.faq summary{cursor:pointer;font:500 19px/1.35 var(--titre);color:var(--noir);padding:14px 0;list-style:none}
.faq summary::after{content:"+";float:right;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.sources{margin-top:44px;padding-top:6px;border-top:4px solid var(--noir);font-size:15px}
.sources h2{font-size:22px;margin-top:16px}
.sources li{font-size:15.5px;margin-bottom:6px}
.retour-home{font:400 15px/1.5 var(--titre);color:var(--gris);border-top:1px solid var(--ligne);padding-top:16px;margin-top:30px}
.signature{margin-top:44px;padding:20px 0 0;border-top:1px solid var(--noir);font-size:16px}
.signature p{margin:0;font-size:16px}
.signature .mini-portrait,.signature img{width:56px;height:56px;border-radius:50%;object-fit:cover;float:left;margin:2px 14px 6px 0}
.signature::after{content:"";display:block;clear:both}

/* auteur */
.auteur-tete{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.auteur-tete .avatar,.auteur-tete img{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 120px}
.initiales{flex:0 0 88px;width:88px;height:88px;border-radius:50%;background:var(--noir);color:#fff;display:flex;align-items:center;justify-content:center;font:500 32px/1 var(--titre)}
.ca-role{font:500 17px/1.3 var(--titre);color:var(--noir);margin:0}
.auteur-chiffres{font:400 14.5px/1.3 var(--titre);color:var(--gris);margin:4px 0 0}
.liste-dates .date{color:var(--gris);font-size:14px}
.bouton{display:inline-block;padding:13px 22px;font:500 15px/1 var(--titre);text-decoration:none}
.bouton-plein{background:var(--noir);color:#fff}
.bouton-plein:hover{background:var(--orange);color:#fff}

/* pied */
.pied{background:var(--noir);color:#cfcfcf;margin-top:40px}
.pied-bandeau{background:var(--jaune);color:var(--noir);padding:18px 0}
.pied-bandeau p{margin:0;font:400 16px/1.5 var(--titre)}
.pied-grille{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:34px;padding:54px 0 36px}
.pied .logo{color:#fff}
.pied .logo-marque i:nth-child(4){background:#fff}
.pied-marque p{font:400 14.5px/1.5 var(--titre);margin:14px 0 0}
.pied-titre{font:500 13px/1 var(--titre);text-transform:uppercase;letter-spacing:.1em;color:#fff;margin:0 0 14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 8px;font:400 14.5px/1.35 var(--titre)}
.pied a{color:#cfcfcf;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-bas{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #333;padding:18px 0 26px;font:400 13.5px/1.3 var(--titre)}

/* animations */
.entree{animation:monte .7s ease both}.d1{animation-delay:.12s}
@keyframes monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.revele{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.revele.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.entree,.revele{animation:none;opacity:1;transform:none;transition:none}}

/* responsive */
@media (max-width:1100px){.grille.quatre{grid-template-columns:repeat(2,1fr)}.pied-grille{grid-template-columns:1fr 1fr 1fr}.entete-baseline{display:none}}
@media (max-width:920px){
  .menu{display:none}.burger{display:block}
  body.menu-ouvert .menu{display:block;position:absolute;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--noir);padding:16px 32px 22px}
  body.menu-ouvert .menu ul{flex-direction:column;gap:14px}
  .une,.article-tete-grille{grid-template-columns:1fr}
  .une-texte{padding:32px}
  .tuiles-rub{grid-template-columns:1fr}.tuile-rub{border-right:0;border-bottom:1px solid var(--noir)}.tuile-rub:last-child{border-bottom:0}
  .grille.trois{grid-template-columns:1fr 1fr}
  .guide-grille,.article-grille{grid-template-columns:1fr;gap:26px}
  .guide-cote,.article-cote{position:static}
  .article-cote{order:-1}
  .fil-in{grid-template-columns:1fr}
}
@media (max-width:600px){
  .large,.etroit{padding:0 18px}
  .grille.trois,.grille.quatre{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
  .heros{padding:40px 0 28px}
  .section{padding:44px 0}
  .texte p,.texte li{font-size:17.5px}
}