/* ============================================================================
   La page presse d'OpenArrêté (/presse/). Elle s'appuie sur tokens.css et base.css
   de la vitrine (boutons, conteneur) et prend les couleurs du générateur : encre
   #202024, blanc chaud, rouge d'action, bande sombre à lueur cuivrée.
   Son plan suit le dossier de presse de l'équipe ; les visuels sont de vraies captures
   du site et de vraies pièces d'un dossier téléchargé : rien n'y est recomposé.

   La même page donne le PDF téléchargeable (voir « L'impression » en bas) :
     node docs/generer.mjs landing/presse/index.html
   puis renommer index.pdf en dossier-de-presse-openarrete.pdf.
   Les polices sont des fichiers statiques servis avec la page : un PDF fabriqué depuis
   les polices variables de Google Fonts les embarque en Type 3.
   ============================================================================ */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('polices/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('polices/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('polices/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url('polices/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('polices/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('polices/space-grotesk-latin-600-normal.woff2') format('woff2'); }

.presse {
  --encre: #202024;
  --secondaire: #5d5d64;
  --discret: #86818a;
  --fond: #fffdfb;
  --filet: #ece7e3;
  --rouge: #e50032;
  --rouge-fonce: #b80028;
  --peche: #f3bba9;
  --nuit-texte: #c9c2c2;
  background: var(--fond);
  color: var(--encre);
}
.presse :focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }
.presse a:not(.btn) { text-decoration: underline; text-decoration-color: #d9cfca; text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s, color .2s; }
.presse a:not(.btn):hover { color: var(--rouge-fonce); text-decoration-color: currentColor; }
.presse h1, .presse h2, .presse h3 { font-weight: 500; letter-spacing: -.04em; color: var(--encre); text-wrap: balance; }
.presse p { text-wrap: pretty; }
.imprime-seulement { display: none; }

/* ---------- La barre ---------- */
.barre { border-bottom: 1px solid var(--filet); background: var(--fond); }
.barre .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.marque { display: flex; align-items: center; gap: 18px; }
.marque a { text-decoration: none !important; color: inherit; }
.produit { font: 600 24px/1 var(--font-heading); letter-spacing: -.06em; }
.produit span { font-weight: 400; }
.produit i { font-style: normal; color: #ed0034; }
.signature { display: flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid #e6dfdc; font-size: 11px; color: #8b7e7e; }
.signature img { width: 76px; height: auto; }
@media (max-width: 560px) { .signature { display: none; } }

/* ---------- L'ouverture ---------- */
.ouverture { padding-top: 76px; }
.ouverture h1 { max-width: 24ch; font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.05; }
.chapo { max-width: 62ch; margin-top: 28px; font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.65; color: var(--secondaire); }
.date { margin-top: 18px; font-size: .9rem; color: var(--discret); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.presse .lien-visuels { font-size: .95rem; font-weight: 500; color: var(--encre); }
.btn--primary { background: var(--rouge); box-shadow: 0 10px 24px -14px #e50032; }
.btn--primary:hover { box-shadow: 0 16px 30px -16px #e50032; }

/* Les quatre informations clés du dossier : quatre colonnes, chacune sous son filet. */
.cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; list-style: none; }
.cles li { padding-top: 18px; border-top: 1px solid var(--encre); }
.cles b { display: block; font: 500 1rem/1.3 var(--font-heading); letter-spacing: -.02em; color: var(--rouge-fonce); }
.cles p { margin-top: 8px; font-size: .98rem; line-height: 1.6; color: var(--secondaire); }
@media (max-width: 960px) { .cles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
@media (max-width: 520px) { .cles { grid-template-columns: minmax(0, 1fr); } }

/* Le grand écran : le seul mouvement de la page, une montée amortie au chargement. */
.ecran-principal { margin-top: 72px; }
.ecran-principal .cadre { animation: monter 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes monter { from { opacity: 0; transform: translateY(48px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .ecran-principal .cadre { animation: none; } }

/* Un écran du site dans son cadre de navigateur. */
.cadre { overflow: hidden; border: 1px solid #e6e0dc; border-radius: 16px; background: #fff; box-shadow: 0 46px 90px -48px rgba(74, 40, 28, .42), 0 2px 8px rgba(74, 40, 28, .06); }
.cadre-barre { display: flex; align-items: center; justify-content: center; height: 38px; border-bottom: 1px solid var(--filet); background: #f7f4f2; }
.cadre-barre span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--discret); }
.cadre-barre svg { width: 11px; height: 11px; }
.cadre img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 18px; max-width: 70ch; font-size: .94rem; line-height: 1.6; color: var(--discret); }

/* ---------- Les titres de section ---------- */
.titre-section { font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.1; }
.intro { max-width: 68ch; margin-top: 16px; font-size: 1.06rem; line-height: 1.75; color: var(--secondaire); }
.filet-haut { border-top: 1px solid var(--filet); }

/* ---------- L'essentiel ---------- */
.essentiel { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 88px; align-items: start; }
.essentiel-texte p { max-width: 65ch; margin-top: 20px; font-size: 1.06rem; line-height: 1.75; color: var(--secondaire); }
.essentiel-texte p:last-child { color: var(--encre); font-weight: 500; }
.telephone { position: sticky; top: 40px; }
.telephone .ecran { overflow: hidden; border: 9px solid #1d1d21; border-radius: 40px; background: #1d1d21; box-shadow: 0 40px 70px -40px rgba(74, 40, 28, .5); }
.telephone img { display: block; width: 100%; height: auto; border-radius: 31px; }
.telephone figcaption { text-align: center; }
@media (max-width: 960px) {
  .essentiel { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .telephone { position: static; max-width: 290px; margin-inline: auto; }
}

/* Les chiffres du dossier, en bande typographique : pas de cartes. */
.chiffres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--filet); list-style: none; }
.chiffres b { display: block; font: 500 clamp(2.2rem, 3.4vw, 3rem)/1 var(--font-heading); letter-spacing: -.05em; }
.chiffres span { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.45; color: var(--secondaire); }
@media (max-width: 960px) { .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; } }
@media (max-width: 520px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Nos engagements : la bande sombre ---------- */
.engagements-section { color: #fff; background: radial-gradient(ellipse at 92% 100%, #4f2c26, #202024 62%); }
.engagements-section h2, .engagements-section h3 { color: #fff; }
.engagements-section .intro { max-width: 70ch; color: var(--nuit-texte); }
.engagements-section .intro strong { color: #fff; font-weight: 500; }

/* Les engagements et les innovations : deux colonnes de blocs titrés, sous un filet. */
.engagements, .innovations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; margin-top: 56px; }
.engagements article, .innovations article { padding-top: 22px; border-top: 1px solid var(--filet); }
.engagements article { border-top-color: rgba(255, 255, 255, .16); }
.engagements h3, .innovations h3 { font-size: 1.3rem; line-height: 1.2; }
.engagements p, .innovations p { margin-top: 12px; max-width: 56ch; font-size: 1rem; line-height: 1.7; }
.engagements p { color: var(--nuit-texte); }
.innovations p { color: var(--secondaire); }
@media (max-width: 960px) { .engagements, .innovations { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* La réponse de l'outil, citée telle quelle. */
.citation { margin-block: 56px 40px; padding: 44px 48px; border-radius: 22px; background: #fff3f4; border: 1px solid #f6d3d9; }
.citation blockquote { font: 500 clamp(1.4rem, 2.3vw, 2rem)/1.25 var(--font-heading); letter-spacing: -.035em; color: var(--encre); }
.citation p { margin-top: 18px; font-size: .95rem; color: var(--discret); }
@media (max-width: 520px) { .citation { padding: 28px; } }

/* ---------- Comment ça marche : trois écrans côte à côte ---------- */
.parcours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.parcours .cadre { border-radius: 12px; }
.parcours figcaption { margin-top: 14px; font-size: .95rem; color: var(--secondaire); }
.parcours figcaption b { color: var(--rouge-fonce); font-weight: 600; }
@media (max-width: 960px) { .parcours { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- Le dossier ---------- */
.pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 28px; margin-top: 56px; }
.piece img { display: block; width: 100%; height: auto; border: 1px solid #e6e0dc; border-radius: 4px; background: #fff; box-shadow: 0 26px 46px -30px rgba(74, 40, 28, .38); }
.piece figcaption { margin-top: 14px; font-size: .9rem; color: var(--secondaire); }
.piece--large { grid-column: span 2; }
@media (max-width: 960px) { .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pieces { gap: 32px 16px; } .piece figcaption { font-size: .82rem; } }

/* ---------- Sur le terrain : trois colonnes séparées par des filets, sans cartes ---------- */
.cas-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.cas-grille article { padding-top: 24px; border-top: 2px solid var(--encre); }
.cas-grille h3 { font-size: 1.3rem; line-height: 1.2; }
.cas-grille p { margin-top: 14px; font-size: 1rem; line-height: 1.7; color: var(--secondaire); }
@media (max-width: 960px) { .cas-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- Les visuels ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 48px; list-style: none; }
@media (max-width: 960px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }
/* L'image est posée en absolu : une capture de téléphone, très haute, ne doit pas allonger la case. */
.visuel-apercu { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--filet); border-radius: 12px; background: #f6f2ef; }
.visuel-apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel-apercu--contenu img { object-fit: contain; padding: 8%; }
.visuel-apercu--nuit { background: #202024; }
.visuel h3 { margin-top: 14px; font-size: 1rem; letter-spacing: -.02em; }
.visuel p { margin-top: 4px; font-size: .86rem; color: var(--discret); }
.visuel a { display: inline-block; margin-top: 8px; font-size: .9rem; font-weight: 500; color: var(--rouge-fonce); }

/* ---------- À propos et contacts ---------- */
.apropos .wrap > p { max-width: 70ch; margin-top: 18px; font-size: 1.04rem; line-height: 1.75; color: var(--secondaire); }
.liens-plateforme { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.carte-contact { padding: 32px; border: 1px solid var(--filet); border-radius: 22px; background: #fff; }
.carte-contact p { font-size: 1rem; line-height: 1.7; color: var(--secondaire); }
.carte-contact .nom { font: 500 1.3rem/1.2 var(--font-heading); letter-spacing: -.03em; color: var(--encre); }
.carte-contact .coordonnees { margin-top: 16px; }
.carte-contact .coordonnees a { color: var(--encre); }
@media (max-width: 960px) { .contacts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Le pied ---------- */
.pied { border-top: 1px solid var(--filet); padding-block: 36px 48px; font-size: .9rem; color: var(--discret); }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.pied a { color: var(--secondaire); }
.pied-cookies { font: inherit; color: var(--secondaire); text-decoration: underline; text-decoration-color: #d9cfca; text-underline-offset: .22em; }
.pied-cookies:hover { color: var(--rouge-fonce); }

/* ---------- L'impression : le PDF téléchargeable ----------
   Le PDF doit sortir pareil dans tous les lecteurs, celui d'Apple compris : pas d'ombre
   floue ni de dégradé, que ce lecteur rend en rectangles gris. La bande sombre devient
   claire, ce qui épargne aussi l'encre de qui imprime. Les boutons, les liens de
   téléchargement et les vignettes des visuels n'ont rien à faire sur papier. */
@media print {
  html { font-size: 13px; }
  .presse { background: #fff; }
  .barre .btn, .actions, .galerie, .pied-cookies, .mesure-bandeau { display: none !important; }
  .imprime-seulement { display: block; }
  .barre .wrap { height: auto; padding-block: 0 12px; }
  .ouverture { padding-top: 14px; }
  .chapo { margin-top: 16px; }
  .date { margin-top: 10px; }
  .section { padding-block: 26px; }
  .ecran-principal { margin-top: 18px; }
  .ecran-principal .cadre { max-width: 90%; }
  #visuels .wrap { break-inside: avoid; }
  .ecran-principal .cadre { animation: none; }
  .cadre, .piece img, .telephone .ecran { box-shadow: none; }
  .telephone { position: static; }
  .chiffres { margin-top: 32px; }
  .engagements-section { color: var(--encre); background: none; border-top: 1px solid var(--filet); }
  .engagements-section h2, .engagements-section h3 { color: var(--encre); }
  .engagements-section .intro, .engagements p { color: var(--secondaire); }
  .engagements-section .intro strong { color: var(--encre); }
  .engagements article { border-top-color: var(--filet); }
  .barre { background: none; }
  p { orphans: 3; widows: 3; }
  .titre-section, .intro { break-after: avoid; }
  .dossier, .apropos { break-before: page; }
  figure, article, .cles li, .chiffres li, .citation, .carte-contact { break-inside: avoid; }
  .pied { padding-block: 16px 0; }

  /* La feuille fait la largeur d'une tablette : on garde quand même les colonnes de l'écran
     large, sans quoi le dossier s'étire sur une douzaine de pages. */
  .cles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
  .essentiel { grid-template-columns: minmax(0, 1fr) 150px; gap: 32px; }
  .telephone { max-width: 150px; margin: 0; }
  .telephone .ecran { border-width: 5px; border-radius: 22px; }
  .telephone img { border-radius: 17px; }
  .chiffres { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-top: 20px; }
  .chiffres b { font-size: 2rem; }
  .chiffres span { font-size: .85rem; }
  .engagements, .innovations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 24px; }
  .citation { margin-block: 24px 16px; padding: 22px 26px; }
  .parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
  .pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; margin-top: 24px; }
  .cas-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
  .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .carte-contact { padding: 16px; border-radius: 14px; }
  figcaption, .parcours figcaption, .piece figcaption { margin-top: 8px; font-size: .85rem; }
}