/* Specific to the article page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

.has-bg .field label{color:#fff}

.has-bg .search-row input{border-color:rgba(255,255,255,.5)}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* ============ ARTICLE : coquille ============ */
  .post{--col:50rem;padding-block:clamp(2rem,1.2rem + 2.4vw,3.1rem) 0}

/* Comme dans .entry-content : une largeur en rem, pas en ch, sinon le h1 en
     serif et le chapo en sans-serif ne s.alignent pas. */
  .post .wrap > *{max-width:var(--col);margin-inline:auto}

/* Fil d'Ariane. Discret, mais indispensable : c'est le seul repere de position
     dans un blog, et Google l'affiche dans ses resultats via BreadcrumbList. */
  .crumb{font-size:var(--step--1);color:var(--muted);margin-bottom:2rem}

.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}

@media (hover:hover){.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}}

.crumb span[aria-current]{color:var(--ink-2)}

/* Sur mobile, un titre d'article contient tôt ou tard un mot plus long que
     l'écran ("d'accompagnement", "accompagnement"). Sans césure, il déborde et
     crée une barre de défilement horizontale sur toute la page. La cliente
     écrira ses propres titres : la protection doit être dans le CSS. */
  .post-head h1{margin-bottom:1.3rem;overflow-wrap:break-word;hyphens:auto}

.entry-content :is(h2,h3){overflow-wrap:break-word;hyphens:auto}

/* 23/10: the date, reading time and author line under the title is gone
   (single.php), with its rules and the hairline it carried. */

/* Le chapo n'est pas dans le corps : c'est l'extrait WordPress, reutilise dans
     la liste et dans les partages. Il doit donc rester un bloc a part. */
  .post-lead{font-size:clamp(1.2rem,1.1rem + .5vw,1.4rem);line-height:1.55;
    color:var(--ink-2);margin-top:1.8rem}

/* Media de tete : facade video quand l'article en a une, image sinon. */
  .post-media{margin-top:2.4rem}

.post-media figcaption{margin-top:.8rem;font-size:var(--step--1);color:var(--muted)}

/* The featured image carries width and height attributes, kept so the space is
     reserved before it loads. Without height:auto the attribute wins over the
     column width and stretched a landscape photo into a portrait one. */
  .post-media img{width:100%;height:auto;border-radius:var(--r)}

.video{position:relative;aspect-ratio:16/9;border:1px solid var(--line-strong);border-radius:var(--r);
    overflow:hidden;background:#16191C center/cover no-repeat;cursor:pointer;width:100%;padding:0;display:block}

/* 23/10: the play triangle follows base.css (no ring, a larger triangle). */
.v-play::after{content:"";margin-left:6px;border-style:solid;border-width:17px 0 17px 28px;
    border-color:transparent transparent transparent var(--paper)}

.v-cap{position:absolute;left:0;right:0;bottom:0;padding:1.3rem 1.4rem 1.2rem;color:var(--paper);
    font-weight:600;font-size:1.05rem;background:rgba(12,14,16,.55)}

/* 24/10: the duration badge in the corner of the videos (.v-dur) is gone from every template. */

/* ============ CONTENU ÉDITEUR ============
     Tout ce que la cliente tape dans WordPress ressort ici. Chaque élément que
     l'éditeur peut produire doit avoir un style, sinon il s'affiche nu.
     À l'intégration, the_content() DOIT être enveloppé dans .entry-content. */
  /* Le conteneur reste large ; ce sont ses ENFANTS qui portent la largeur de
     lecture. Sans ça, .alignwide ne pourrait jamais déborder la colonne. */
  .post .wrap > .entry-content{max-width:none}

/* --col est en rem, PAS en ch. L'unité ch dépend de la police de l'élément :
     avec --measure:65ch, un titre en Source Serif et un paragraphe en Figtree
     obtiennent deux largeurs différentes, et margin-inline:auto les décale
     l'un par rapport à l'autre. Une valeur absolue aligne tout le flux. */
  .entry-content{--flow:1.45em;--col:50rem;margin-top:2.8rem}

/* Task 261. The client will paste addresses: a long URL has no break point and
     pushed the whole page sideways on a phone. */
  .entry-content{overflow-wrap:break-word}

.entry-content > * + *{margin-top:var(--flow)}

.entry-content > *{max-width:var(--col);margin-inline:auto}

/* La marge haute des titres est volontairement plus grande que la basse :
     un titre appartient visuellement au bloc qui le suit, pas à celui d'avant. */
  .entry-content h2{font-family:"Source Serif 4",Georgia,serif;font-size:var(--h3);
    font-weight:500;line-height:1.18;letter-spacing:-.01em;color:var(--ink);
    margin-top:2.2em;margin-bottom:0}

.entry-content h3{font-family:"Source Serif 4",Georgia,serif;font-size:1.22rem;
    font-weight:600;line-height:1.25;color:var(--ink);margin-top:1.8em;margin-bottom:0}

.entry-content :is(h2,h3) + *{margin-top:.85em}

.entry-content :is(ul,ol){padding-left:1.4em}

.entry-content li + li{margin-top:.5em}

.entry-content li::marker{color:var(--accent)}

/* Valérie fera un usage fréquent de la citation : c'est son matériau. */
  .entry-content blockquote{border-left:3px solid var(--accent);padding-left:1.4rem;
    font-family:"Source Serif 4",Georgia,serif;font-size:1.22rem;font-style:italic;
    line-height:1.42;color:var(--ink)}

.entry-content blockquote p{max-width:none}

.entry-content blockquote cite{display:block;margin-top:.8rem;font-size:max(1rem,var(--step--1));
    font-style:normal;color:var(--muted)}

.entry-content :is(img,video){max-width:100%;height:auto;border-radius:var(--r)}

.entry-content figcaption{margin-top:.7rem;font-size:max(1rem,var(--step--1));color:var(--muted);line-height:1.45}

/* Code en ligne. Rare sur ce site, mais l'éditeur sait le produire et il
     s'afficherait sans style. */
  .entry-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
    background:var(--tint);padding:.12em .4em;border-radius:3px}

/* Dans un corps de lecture, un lien se souligne : ce n'est pas de l'interface. */
  .entry-content a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
    text-decoration-color:var(--line-strong)}

@media (hover:hover){.entry-content a:hover{color:var(--accent);text-decoration-color:currentColor}}

/* Encadré d'appel. Correspond au bloc "Groupe" de l'éditeur avec une couleur de fond. */
  .entry-content .callout{background:var(--warm);border-left:3px solid var(--accent);
    padding:1.4rem 1.6rem;border-radius:0 var(--r) var(--r) 0}

.entry-content .callout p{max-width:none}

.entry-content .callout > * + *{margin-top:.7em}

/* Classes posées par Gutenberg. Sans ces règles, images larges et tableaux
     débordent de la colonne de lecture ou la font déborder. */
  /* 56rem (896px) et non 64 : les photos du projet font 900px de large, au-delà
     elles seraient agrandies donc floues. En production, avec des originaux de
     la médiathèque, cette valeur peut remonter. La règle reste : ne jamais
     afficher une image plus grande que sa taille native. */
  .entry-content .alignwide{max-width:min(100%,56rem)}

.entry-content .alignfull{max-width:none;width:100%;border-radius:0}

.entry-content .wp-block-table{display:block;overflow-x:auto}

.entry-content .wp-block-table table{width:100%;border-collapse:collapse}

.entry-content .wp-block-table :is(th,td){padding:.7rem .9rem;border:0;border-bottom:1px solid var(--line);
    text-align:left;vertical-align:top;min-width:7rem}

.entry-content .wp-block-table th{font-weight:600;color:var(--ink);
    border-bottom-color:var(--line-strong)}

/* The core stylesheet frames every cell and draws a 3px rule under the head.
     Here a table reads as rows, like the rest of the page's lists. */
  .entry-content .wp-block-table :is(thead,tfoot){border:0}

.entry-content .wp-block-table :is(th,td):first-child{padding-left:0}

.entry-content .wp-block-separator{margin-block:2.6em;border:0;border-top:1px solid var(--line);
    max-width:var(--col)}

.entry-content .wp-block-embed{max-width:var(--col)}

.entry-content .wp-block-embed.alignwide{max-width:min(100%,56rem)}

/* Task 261. A YouTube embed is served as the site's facade (inc/images.php): the
     .video box carries its own 16/9 ratio. The core stylesheet adds a 16/9 spacer
     to the wrapper of any video embed, and the former padding hack here a second
     one: together the player sat at the top of a box twice its height. Other video
     providers keep a real iframe, given the same ratio. */
  .entry-content .wp-block-embed__wrapper{position:relative}

.entry-content .wp-block-embed__wrapper::before{content:none}

.entry-content .wp-block-embed iframe{max-width:100%;border:0}

.entry-content .wp-block-embed.is-type-video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9}

.entry-content .wp-block-embed figcaption,.entry-content .wp-block-table figcaption{text-align:left}

/* Aligned images. Floats only once the column is wide enough to keep a readable
     line beside them; below that, an image floated at half a phone's width leaves
     a ribbon of three words per line. */
  .entry-content :is(.aligncenter,.wp-block-image.aligncenter){margin-inline:auto;text-align:center}

.entry-content .wp-block-image :is(img,figcaption){margin-inline:auto}

@media (min-width:700px){
    .entry-content .alignleft{float:left;max-width:min(50%,24rem);margin:.3em 1.8rem 1rem 0}
    .entry-content .alignright{float:right;max-width:min(50%,24rem);margin:.3em 0 1rem 1.8rem}
    .entry-content::after{content:"";display:table;clear:both}
  }

/* Buttons typed in the editor. The core block paints them dark grey with a pill
     radius; here they take the site's two buttons. Never the accent red: a red
     button reads as a warning. */
  .entry-content .wp-block-buttons{display:flex;flex-wrap:wrap;gap:1rem}

.entry-content .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;
    min-height:var(--target);padding:.8rem 1.6rem;border:1.5px solid var(--ink);border-radius:var(--r);
    background:var(--ink);color:var(--paper);font:inherit;font-weight:600;line-height:1.2;
    text-decoration:none;transition:background .18s ease,color .18s ease}

.entry-content .is-style-outline .wp-block-button__link{background:transparent;color:var(--ink)}

@media (hover:hover){.entry-content .wp-block-button__link:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}}

@media (hover:hover){.entry-content .is-style-outline .wp-block-button__link:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}

/* Pull quote: the highlighted citation. Same voice as the quote, set apart by
     rules above and below rather than a coloured box. */
  .entry-content .wp-block-pullquote{border-block:1px solid var(--line-strong);padding:1.8rem 0;text-align:center}

.entry-content .wp-block-pullquote blockquote{border:0;padding:0;font-size:var(--h3);margin:0}

.entry-content .wp-block-pullquote p{margin-inline:auto}

.entry-content h4{font-size:var(--body);font-weight:700;color:var(--ink);margin-top:1.6em;margin-bottom:0}

.entry-content .wp-block-separator{opacity:1}

/* ============ PIED D'ARTICLE ============ */
  .post-foot{margin-top:3.2rem;padding-top:1.8rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;justify-content:space-between}

.post-tags{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

.post-tags .tl{font-size:var(--step--1);color:var(--muted);margin-right:.2rem}

.tag{display:inline-flex;align-items:center;min-height:38px;padding:.3rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none;
    color:var(--ink-2);font-size:.94rem;font-weight:600;background:var(--surface);
    transition:color .18s ease,border-color .18s ease}

@media (hover:hover){.tag:hover{color:var(--ink);border-color:var(--muted)}}

.post-share{font-size:.95rem;color:var(--muted)}

.post-share a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong)}

@media (hover:hover){.post-share a:hover{color:var(--accent);border-bottom-color:var(--accent)}}

/* ============ SIGNATURE AUTEUR ============ */
  .byline{display:grid;grid-template-columns:76px 1fr;gap:1.3rem;align-items:start;
    margin-top:2.6rem;padding:1.6rem 0 0;border-top:1px solid var(--line)}

.byline-face{width:76px;height:76px;border-radius:50%;background:#E4DBD2 center/cover no-repeat;
    box-shadow:0 0 0 1px var(--line)}

.byline h2{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The author's biography is running text. Was 1rem (16 px). */
.byline p{color:var(--ink-2);font-size:var(--body);max-width:none}

/* ============ ARTICLES LIÉS ============ */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,1rem + 2vw,2.6rem)}

.card{display:flex;flex-direction:column}

.card-media{aspect-ratio:3/2;background:#E6E2D8 center/cover no-repeat;
    border:1px solid var(--line-strong);border-radius:var(--r);margin-bottom:1.1rem}

/* Vignette sans visage : une lettrine sur fond chaud, reprise du titre.
     Un portrait de banque d'images à côté d'un article signé laisse croire
     à une personne réelle ; la lettre ne prétend à rien. */
  .card-media-init{background:var(--warm);display:grid;place-items:center;
    font-family:"Source Serif 4",Georgia,serif;font-size:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);
    font-weight:600;color:var(--accent);letter-spacing:.02em}

.card .eyebrow{margin-bottom:.6rem}

.card-title{font-family:"Source Serif 4",Georgia,serif;font-size:1.3rem;font-weight:500;
    letter-spacing:-.008em;line-height:1.2;margin-bottom:.7rem}

.card-title a{text-decoration:none}

@media (hover:hover){.card-title a:hover{color:var(--accent)}}

.card .meta{margin-top:auto}

.meta{color:var(--muted);font-size:.9rem;letter-spacing:.02em}

.confid h2{color:#fff;margin-bottom:1rem}

.confid p{color:#D8CFC1;max-width:62ch}

@media (max-width:820px){
    .cards{grid-template-columns:1fr 1fr}
    .post-foot{flex-direction:column;align-items:flex-start}
  }

@media (max-width:560px){
    .cards{grid-template-columns:1fr}
    .byline{grid-template-columns:1fr}
  }

/* A page rendered by the index.php fallback (legal notice, privacy policy) ends
   on its last paragraph, with no related posts or callback block below: it needs
   its own breathing room before the footer. */
.page-prose{padding-bottom:clamp(3rem,2rem + 3vw,5rem)}