/* ===================================================================
   gauthier.digital — feuille de style du thème
   -------------------------------------------------------------------
   Toutes les couleurs et les polices viennent de assets/css/tokens.css,
   lui-même copie de identite/tokens.css. Aucune valeur en dur ici :
   si une teinte manque, on l'ajoute aux jetons, pas dans ce fichier.

   Sommaire
   01. Socle
   02. Utilitaires et accessibilité
   03. En-tête, navigation, menu mobile, bascule de thème
   04. Boutons
   05. Héros
   06. Bandeau de repères
   07. Sections
   08. Thématiques
   09. Outils
   10. Bloc d'accès aux supports
   11. Réalisations
   12. Parcours
   13. Témoignages
   14. Pied de page
   15. Contenu éditorial WordPress
   =================================================================== */


/* ------------------------------------------------------------------
   01. Socle
   ------------------------------------------------------------------ */

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-weight);
  letter-spacing:0;
  text-wrap:balance;
  line-height:1.06;
}

/* Titres posés sur un aplat bleu nuit : une graisse de plus, sinon les
   déliés de Melodrama se referment à l'écran. */
.hero h1,
.promo h2{font-weight:var(--display-weight-block)}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Fraunces porte les titres. Les intertitres courts restent en Satoshi
   (voir .dom h3, .tool h3…) : sous 20 px, une display n'apporte rien. */


/* ------------------------------------------------------------------
   02. Utilitaires et accessibilité
   ------------------------------------------------------------------ */

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow-block{
  color:var(--magenta);
  background:var(--snow);
  display:inline-block;
  padding:5px 12px;
}

.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--block);
  color:var(--on-block);
  padding:12px 18px;
  font-size:.86rem;
  font-weight:600;
  text-decoration:none;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  a,button{transition:color .15s ease,background .15s ease}
}


/* ------------------------------------------------------------------
   03. En-tête, navigation, menu mobile, bascule de thème
   ------------------------------------------------------------------ */

.hdr{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:66px}

/* Le logotype est bicolore dans la charte : le bleu nuit porte le nom,
   le magenta le monogramme. Les deux teintes passent par des variables
   posées ici, et non écrites dans le fichier SVG — dont chaque forme
   retombe sur currentColor quand elles ne sont pas définies. C'est ce
   qui permet au même fichier de servir en couleur dans l'en-tête et en
   blanc neige sur l'aplat du pied de page, sans doublon. */
.brand{
  display:flex;
  align-items:center;
  gap:0;
  color:var(--brand);
  flex:0 0 auto;
  --logo-bleu:var(--brand);
  --logo-rouge:var(--accent);
}
.brand svg{height:30px;width:auto;display:block}

.nav{margin-left:auto;font-size:.88rem;font-weight:500}
.nav-liste{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-liste li{margin:0}
.nav-liste a{
  display:inline-block;
  text-decoration:none;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:1.5px solid transparent;
}
.nav-liste a:hover,
.nav-liste .current-menu-item > a,
.nav-liste .current_page_item > a{color:var(--ink);border-bottom-color:var(--accent)}

/* Boutons carrés de l'en-tête : menu et thème */
.iconbtn{
  display:flex;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-2);
  background:var(--surface);
  border-radius:var(--radius);
  flex:0 0 auto;
  color:var(--ink);
}
.iconbtn:hover{border-color:var(--accent)}

.burger{display:none}
.burger i{display:block;width:17px;height:1.6px;background:var(--ink);position:relative}
.burger i::before,
.burger i::after{
  content:"";
  position:absolute;
  left:0;
  width:17px;height:1.6px;
  background:var(--ink);
  transition:transform .18s ease,top .18s ease;
}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.hdr.open .burger i{background:transparent}
.hdr.open .burger i::before{top:0;transform:rotate(45deg)}
.hdr.open .burger i::after{top:0;transform:rotate(-45deg)}

.theme-toggle svg{width:18px;height:18px;display:block;fill:currentColor}
.theme-toggle .ico-nuit{display:none}
:root[data-theme="dark"] .theme-toggle .ico-nuit{display:block}
:root[data-theme="dark"] .theme-toggle .ico-jour{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-nuit{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ico-jour{display:none}
}

.hdr .btn{margin-left:4px}

@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex;margin-left:auto}
  .hdr.open .nav{
    display:block;
    position:absolute;
    top:66px;left:0;right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:4px var(--gut) 16px;
  }
  .hdr.open .nav-liste{flex-direction:column;gap:0}
  .hdr.open .nav-liste a{
    display:block;
    padding:13px 2px;
    border-bottom:1px solid var(--line);
    font-size:1rem;
    color:var(--ink);
  }
  .hdr.open .nav-liste li:last-child a{border-bottom:0}
}
@media(max-width:560px){
  .hdr .wrap{gap:10px}
  .hdr .btn{padding:10px 13px;font-size:.8rem}
  .iconbtn{width:38px;height:38px}
  .brand svg{height:25px}
}
@media(max-width:400px){
  .hdr .btn{padding:9px 11px;font-size:.76rem}
}


/* ------------------------------------------------------------------
   04. Boutons
   ------------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  font-size:.87rem;
  font-weight:600;
  border-radius:var(--radius);
  text-decoration:none;
  transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:translateY(1px)}

.btn-a{background:var(--magenta);color:var(--snow)}
.btn-a:hover{background:var(--accent-strong)}

.btn-b{background:transparent;color:var(--on-block);box-shadow:inset 0 0 0 1.5px currentColor}
.btn-b:hover{background:color-mix(in srgb,var(--on-block) 12%,transparent)}

.btn-c{background:var(--block);color:var(--on-block)}
.btn-c:hover{background:color-mix(in srgb,var(--block) 86%,var(--magenta))}


/* ------------------------------------------------------------------
   05. Héros
   ------------------------------------------------------------------ */

.hero{background:var(--block);color:var(--on-block);position:relative;overflow:hidden}
.hero .wrap{
  position:relative;
  z-index:2;
  padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,86px);
}

/* Lettres décoratives G · U · M, découpées dans le logotype */
.glyph{
  position:absolute;
  font-family:var(--display);
  font-weight:300;
  line-height:.8;
  color:var(--magenta);
  opacity:.28;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.g1{font-size:clamp(300px,42vw,620px);left:-.12em;top:-.18em}
.g2{font-size:clamp(300px,42vw,620px);right:-.1em;bottom:-.42em}

/* Fraunces est plus large que ne l'était Melodrama : l'accroche passe
   sur trois lignes. On réduit le corps pour que les deux boutons
   restent visibles sans défiler sur un portable de 768 px de haut. */
.hero h1{font-size:clamp(2.2rem,5.4vw,4.3rem);max-width:16ch}
.hero .kicker{margin-bottom:26px}
.hero .sub{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--on-block-soft);
}
.hero .sig{margin-top:14px;max-width:52ch;font-size:.95rem;color:var(--on-block-soft)}
.hero .sig b{color:var(--snow);font-weight:600}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}


/* ------------------------------------------------------------------
   06. Bandeau de repères
   ------------------------------------------------------------------ */

.facts{background:var(--surface);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.fact{background:var(--surface);padding:22px 22px 20px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
/* Un repère porte tantôt un nombre seul, tantôt une mention — « Depuis
   2015 », « RNCP 7 ». line-height:1 convenait au nombre seul et collait
   deux lignes l'une à l'autre dès que la mention passait à la ligne sur
   une colonne étroite. */
.fact b{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.55rem,2.8vw,2.3rem);
  color:var(--brand);
  line-height:1.04;
  text-wrap:balance;
}
.fact span{display:block;margin-top:8px;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:700px){.fact{border-right:0;border-bottom:1px solid var(--line)}}


/* ------------------------------------------------------------------
   07. Sections
   ------------------------------------------------------------------ */

.section{padding-block:clamp(52px,7vw,92px)}
.section--flush{padding-bottom:0}

.sechead{margin-bottom:38px;max-width:60ch}
.sechead .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.sechead h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.sechead p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;max-width:56ch}

.alt{background:var(--surface);border-block:1px solid var(--line)}


/* ------------------------------------------------------------------
   08. Thématiques
   La grille « .dom » porte les thématiques : elles ont remplacé les
   six domaines et le tableau des écoles de la maquette.
   ------------------------------------------------------------------ */

/* Les filets sont portés par les cellules, pas par un fond de grille :
   avec un nombre d'entrées qui ne remplit pas la dernière rangée, un
   fond de grille laisserait un aplat gris à la place des cases vides. */
.dom article{
  flex:0 0 min(300px,80vw);
  background:var(--paper);
  padding:26px 24px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-snap-align:start;
}
.alt .dom article{background:var(--surface)}
.dom h3{font-family:var(--body);font-weight:600;font-size:1.04rem;letter-spacing:0;line-height:1.3}
.dom p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.dom .tag{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.04em}


/* ------------------------------------------------------------------
   09. Outils
   ------------------------------------------------------------------ */

.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.tool{
  background:var(--surface);
  border:1px solid var(--line);
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}
.alt .tool{background:var(--paper)}
.tool .badge{
  position:absolute;
  top:0;right:0;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 9px;
  background:var(--surface-3);
  color:var(--ink-faint);
}
.tool .badge.on{background:var(--magenta);color:var(--snow)}
.tool h3{font-family:var(--body);font-weight:600;font-size:1.06rem;letter-spacing:0}
.tool p{font-size:.9rem;color:var(--ink-soft);line-height:1.52}
.tool .metrics{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line-2);
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--ink-faint);
  list-style:none;
  margin-bottom:0;
  padding-inline:0;
}


/* ------------------------------------------------------------------
   10. Bloc d'accès aux supports
   ------------------------------------------------------------------ */

.promo{background:var(--block);color:var(--on-block);position:relative;overflow:hidden}
.promo .wrap{
  position:relative;
  z-index:2;
  padding-block:clamp(48px,6vw,78px);
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:44px;
  align-items:center;
}
.promo .eyebrow-block{margin-bottom:22px}
.promo h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.promo p{margin-top:18px;color:var(--on-block-soft);max-width:44ch;font-size:1rem}

.codebox{background:var(--snow);color:var(--ink-fixed);padding:26px 24px 24px;margin:0}
.codebox label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
}
.codebox .field{display:flex;gap:8px}
.codebox input{
  flex:1;
  min-width:0;
  font-family:var(--mono);
  font-size:.95rem;
  padding:12px 13px;
  border:1.5px solid var(--line-2);
  background:var(--snow);
  color:var(--ink-fixed);
  border-radius:var(--radius);
}
.codebox input:focus{outline:2px solid var(--magenta);outline-offset:1px;border-color:transparent}
.codebox .hint{margin-top:12px;font-size:.8rem;color:var(--ink-faint)}
@media(max-width:820px){.promo .wrap{grid-template-columns:1fr;gap:30px}}


/* ------------------------------------------------------------------
   11. Réalisations
   ------------------------------------------------------------------ */

.work{
  flex:0 0 min(300px,80vw);
  background:var(--paper);
  padding:0 0 26px;
  display:flex;
  flex-direction:column;
  gap:0;
  scroll-snap-align:start;
}
.work > :not(.work-vignette):not(.work-patch):not(.work-lien){margin-inline:22px}
.work > .role{margin-top:20px}

/* Le visuel du projet, ou à défaut une pastille à son initiale. Même
   emprise dans les deux cas : une bande où la moitié des cartes aurait
   une image et l'autre un vide n'irait pas. */
.work-vignette,
.work-patch{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--block);
  margin:0;
}
/* Cinq projets n'ont jamais eu de maquette : le logo du client tient la
   place. Un logo se pose entier sur un fond clair, il ne se recadre pas —
   object-fit:cover en couperait le haut et le bas, et un logo tronqué
   n'est plus le logo de personne. Le fond blanc est en dur, comme dans la
   bande des références : le suivre en mode sombre rendrait illisibles
   ceux qui sont dessinés en texte foncé. */
.work-vignette--logo{
  object-fit:contain;
  background:#fff;
  padding:28px 34px;
}

.work-patch{
  display:grid;
  place-items:center;
  color:var(--on-block);
  font-family:var(--display);
  font-weight:var(--display-weight-block);
  font-size:2.6rem;
  line-height:1;
  opacity:.9;
}
.alt .work{background:var(--surface)}
.work .role{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.work h3{font-family:var(--body);font-weight:600;font-size:1.02rem;letter-spacing:0;margin:9px 0}
/* Le résumé, plafonné à cinq lignes. Les extraits font de dix-huit à
   vingt-sept mots : à cette largeur cela donne trois à cinq lignes, et
   sans plafond une carte pousse la bande plus haut que les autres. Le
   plafond est un filet, pas un raccourci — le texte affiché reste un
   résumé écrit, jamais un début de phrase coupé. */
.work p{
  font-size:.89rem;
  color:var(--ink-soft);
  line-height:1.5;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  line-clamp:5;
  overflow:hidden;
}


/* ------------------------------------------------------------------
   12. Parcours
   ------------------------------------------------------------------ */

/* Deux colonnes : le portrait, puis la chronologie. Sous 760 px la
   photo passe au-dessus et se limite en hauteur pour ne pas repousser
   le texte hors de l'écran. */
.parcours{
  display:grid;
  grid-template-columns:minmax(200px,280px) 1fr;
  gap:clamp(22px,4vw,46px);
  align-items:start;
}

.portrait{
  margin:0;
  background:var(--surface-2);
  border:1px solid var(--line);
  line-height:0;
}
.portrait img{width:100%;height:auto;display:block}

.path{border-top:1px solid var(--line-2)}
.step{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.step .yr{font-family:var(--mono);font-size:.78rem;color:var(--accent);padding-top:.22em}
.step b{font-weight:600;font-size:.99rem}
.step span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:2px}
@media(max-width:760px){
  .parcours{grid-template-columns:1fr;gap:26px}
  .portrait{max-width:260px}
}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:2px}}


/* ------------------------------------------------------------------
   13. Témoignages
   La mécanique de la bande est plus bas, commune aux trois blocs qui
   défilent. Ici, seules les cartes d'avis.
   ------------------------------------------------------------------ */

/* La bande défilante — commune aux thématiques, aux réalisations et
   aux témoignages.

   Deux niveaux, dans cet ordre :
   1. sans script, le ruban se parcourt au doigt, à la molette et au
      clavier — c'est du défilement natif, rien à charger ;
   2. avec script, le ruban est dupliqué et l'animation le fait défiler
      en continu ; la classe « anime » bascule d'un mode à l'autre.

   Le mouvement s'arrête au survol, dès qu'une carte reçoit le focus,
   et par le bouton de l'en-tête de section. Un mouvement perpétuel
   sans moyen de l'arrêter est une faute d'accessibilité (WCAG 2.2.2). */

.bande{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  scrollbar-width:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  /* Le fond gris qui dessine les filets entre les cartes appartient au
     ruban, pas au conteneur. Une bande trop courte pour l'écran — six
     références sur un grand écran — laissait sinon voir une plage
     grise à droite du dernier élément. */
  background:var(--paper);
}
.bande::-webkit-scrollbar{display:none}
.bande:focus-visible{outline:2px solid var(--magenta);outline-offset:-2px}

.bande-ruban{
  display:flex;
  gap:1px;
  padding-inline:var(--gut);
  width:max-content;
  background:var(--line);
}

.bande.anime{
  overflow:hidden;
  scroll-snap-type:none;
}
.bande.anime .bande-ruban{
  padding-inline:0;
  animation:bande-defile var(--duree,90s) linear infinite;
}
.bande.anime[data-sens="inverse"] .bande-ruban{animation-direction:reverse}
.bande.anime:hover .bande-ruban,
.bande.anime:focus-within .bande-ruban,
.bande.pause .bande-ruban{animation-play-state:paused}

@keyframes bande-defile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Réglage système « réduire les animations » : on rend la main. */
@media(prefers-reduced-motion:reduce){
  .bande.anime{overflow-x:auto;scroll-snap-type:x mandatory}
  .bande.anime .bande-ruban{animation:none;padding-inline:var(--gut)}
  .bande-nav{display:none}
}

/* Le bouton suspendre / reprendre */
.bande-nav{flex:0 0 auto;padding-bottom:4px}
.bande-nav svg{width:16px;height:16px;display:block;fill:currentColor}
.bande-nav .pause{display:none}
.bande-nav button[aria-pressed="true"] .pause{display:block}
.bande-nav button[aria-pressed="true"] .lecture{display:none}

.sechead--bande{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sechead--bande > div:first-child{flex:1 1 auto;min-width:0;max-width:60ch}
@media(max-width:700px){
  .sechead--bande{display:block}
  .bande-nav{display:none}
}

/* La bande des références : un logo par carte, dans une boîte de
   hauteur fixe. object-fit:contain garde les proportions, quelles que
   soient celles du fichier — un blason carré, une signature large et
   une image sur fond de couleur tiennent alors la même ligne. */
.ref-item{
  margin:0;
  flex:0 0 min(240px,68vw);
  scroll-snap-align:start;
  background:var(--paper);
  padding:24px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.ref-cadre{
  display:flex;
  align-items:center;
  justify-content:center;
  height:78px;
  padding:8px;
  /* Seule couleur en dur du thème, et c'est assumé : un logo est
     dessiné pour un fond clair. Le laisser suivre le mode sombre
     rendrait illisibles ceux qui sont en texte foncé détouré. */
  background:#fff;
  border:1px solid var(--line);
}

/* Largeur et hauteur imposées, puis object-fit:contain : c'est la
   seule combinaison qui tienne. Avec max-height:100%, un logo carré
   déborde — le pourcentage se résout contre une boîte dont la hauteur
   dépend de l'image elle-même, et la règle ne s'applique jamais. */
.ref-cadre img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ref-cadre--vide{
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--ink-faint);
  background:var(--surface);
}

.ref-item figcaption b{display:block;font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
.ref-item figcaption > span{display:block;margin-top:3px;font-size:.78rem;color:var(--ink-faint);line-height:1.4}

.avis-item{
  margin:0;
  flex:0 0 min(360px,82vw);
  scroll-snap-align:start;
  background:var(--surface);
  padding:28px 26px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.avis-item blockquote{
  margin:0;
  font-size:.95rem;
  line-height:1.62;
  color:var(--ink-soft);
  position:relative;
  padding-top:24px;
}
.avis-item blockquote::before{
  content:"«";
  position:absolute;
  top:-8px;left:-2px;
  font-family:var(--display);
  font-size:2.6rem;
  line-height:1;
  color:var(--accent);
}

.avis-item figcaption{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:6px;
}
.avis-photo,
.avis-initiales{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:50%;
  display:block;
  object-fit:cover;
}
.avis-initiales{
  display:grid;
  place-items:center;
  background:var(--block);
  color:var(--on-block);
  font-family:var(--body);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.02em;
}
.avis-qui b{display:block;font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
.avis-qui > span{display:block;margin-top:2px;font-size:.78rem;color:var(--ink-faint);line-height:1.4}


/* ------------------------------------------------------------------
   14. Pied de page
   ------------------------------------------------------------------ */

.site-footer{
  background:var(--block);
  color:var(--on-block);
  padding-block:54px 34px;
  position:relative;
  overflow:hidden;
}
.site-footer .wrap{position:relative;z-index:2}

.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px 26px}
.fgrid svg{height:44px;width:auto;color:var(--snow);margin-bottom:16px}
.fgrid p{color:var(--on-block-soft);font-size:.9rem;max-width:34ch}
.fgrid h2{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--magenta);
  margin:0 0 14px;
  font-family:var(--body);
  line-height:1.4;
}
.fgrid ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:.9rem;
  color:var(--on-block-soft);
}
/* Les liens du pied de page font 18 px de haut : sous la barre des
   24 px que demande le critère « taille de cible » du WCAG 2.2. Le
   remplissage vertical les y amène sans rien changer à l'aspect — la
   gouttière de la liste est réduite d'autant. */
.fgrid a{text-decoration:none;display:inline-block;padding-block:4px}
.fgrid ul{gap:1px}
.fgrid a:hover{color:var(--snow)}

.fbot{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid color-mix(in srgb,var(--on-block) 20%,transparent);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:.76rem;
  color:var(--on-block-soft);
  list-style:none;
  padding-inline:0;
}
.fbot a{text-decoration:none;display:inline-block;padding-block:5px}
.fbot a:hover{color:var(--snow)}

@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:30px 24px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:26px}}


/* ------------------------------------------------------------------
   15. Contenu éditorial WordPress
   Pages, articles, résultats de recherche, 404, commentaires.
   ------------------------------------------------------------------ */

.page-head{padding-block:clamp(44px,6vw,76px) 0}
.page-head h1{font-size:clamp(2rem,4.2vw,3.2rem)}
.page-head .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.page-head .meta{margin-top:14px;font-family:var(--mono);font-size:.78rem;color:var(--ink-faint)}
.page-head .chapo{margin-top:18px;max-width:60ch;color:var(--ink-soft);font-size:1.02rem}

.entry{padding-block:clamp(34px,4vw,54px)}
.entry-content{max-width:72ch}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:1.8em}
.entry-content h3{
  font-family:var(--body);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:0;
  line-height:1.35;
  margin-top:1.6em;
}
.entry-content a{color:var(--accent);text-underline-offset:.18em}
.entry-content ul,
.entry-content ol{padding-left:1.25em}
.entry-content li + li{margin-top:.4em}
.entry-content blockquote{
  margin-inline:0;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);
  color:var(--ink-soft);
}
.entry-content code,
.entry-content kbd{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:2px 5px}
.entry-content pre{
  font-family:var(--mono);
  font-size:.85rem;
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:16px 18px;
  overflow-x:auto;
}
.entry-content pre code{background:none;padding:0}
.entry-content table{width:100%;border-collapse:collapse;font-size:.92rem}
.entry-content th,
.entry-content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.entry-content th{font-weight:600;color:var(--ink)}
.entry-content figure{margin-inline:0}
.entry-content figcaption{margin-top:8px;font-size:.82rem;color:var(--ink-faint)}
.entry-content hr{border:0;border-top:1px solid var(--line)}

.alignleft{float:left;margin:0 1.4em .8em 0}
.alignright{float:right;margin:0 0 .8em 1.4em}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:min(1180px,100%)}
.alignfull{max-width:100%}

.liste-articles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.liste-articles article{
  background:var(--paper);
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:9px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.liste-articles h2{font-family:var(--body);font-weight:600;font-size:1.05rem;letter-spacing:0;line-height:1.3}
.liste-articles h2 a{text-decoration:none}
.liste-articles h2 a:hover{color:var(--accent)}
.liste-articles .date{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)}
.liste-articles p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}

.pagination{display:flex;flex-wrap:wrap;gap:6px;padding-block:34px}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;height:38px;
  padding-inline:10px;
  border:1px solid var(--line-2);
  font-size:.86rem;
  text-decoration:none;
  color:var(--ink-soft);
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--ink)}
.pagination .page-numbers.current{background:var(--block);color:var(--on-block);border-color:var(--block)}

.recherche{display:flex;gap:8px;max-width:440px}
.recherche input[type="search"]{
  flex:1;
  min-width:0;
  font-family:var(--body);
  font-size:.95rem;
  padding:11px 13px;
  border:1.5px solid var(--line-2);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius);
}
.recherche input[type="search"]:focus{outline:2px solid var(--magenta);outline-offset:1px;border-color:transparent}

.vide{padding-block:clamp(48px,7vw,90px);max-width:60ch}
.vide .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.vide h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.vide h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.vide p{margin-top:16px;color:var(--ink-soft)}
.vide .recherche{margin-top:24px}
.vide .vide-cta{margin-top:22px}

.commentaires{padding-block:clamp(34px,4vw,54px);max-width:72ch;border-top:1px solid var(--line)}
.commentaires h2{font-size:1.5rem;margin-bottom:22px}
.commentaires ol{list-style:none;margin:0;padding:0}
.commentaires .comment-body{padding-block:18px;border-bottom:1px solid var(--line)}
.commentaires .comment-meta{font-size:.8rem;color:var(--ink-faint);margin-bottom:8px}
.commentaires .children{list-style:none;margin:0;padding-left:26px}


/* ------------------------------------------------------------------
   16. Espace supports
   ------------------------------------------------------------------ */

/* La porte : un seul champ, une seule action. Rien d'autre à l'écran,
   parce qu'un étudiant qui arrive ici a déjà le code en main et n'a
   aucune décision à prendre. */
.porte{
  margin-block:clamp(28px,4vw,44px) clamp(48px,7vw,84px);
  max-width:46ch;
  padding:26px 24px 24px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.porte label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.porte .field{display:flex;gap:8px}
.porte input{
  flex:1;
  min-width:0;
  font-family:var(--mono);
  font-size:.95rem;
  letter-spacing:.06em;
  padding:12px 13px;
  border:1.5px solid var(--ink-faint);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
}
.porte input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.porte .hint{margin-top:12px;font-size:.8rem;color:var(--ink-soft)}
@media(max-width:480px){
  .porte .field{flex-direction:column}
  .porte .btn{width:100%}
}

/* Un refus se dit en clair, avec la cause. « Erreur » tout seul
   n'aide personne à entrer. */
.alerte{
  margin-top:24px;
  max-width:60ch;
  padding:14px 16px;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  color:var(--ink);
  font-size:.95rem;
  line-height:1.55;
}

.supports{
  list-style:none;
  margin:clamp(28px,4vw,40px) 0 0;
  padding:0;
  max-width:78ch;
  border-top:1px solid var(--line);
}
.support{border-bottom:1px solid var(--line)}

/* La ligne entière est cliquable : sur téléphone, une cible de la
   largeur de l'écran vaut mieux qu'un lien de trois mots. */
.support > a{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 6px;
  text-decoration:none;
  color:inherit;
}
.support > a:hover{background:var(--surface-2)}
.support > a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.support-ico{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
}
.support-ico svg{width:22px;height:22px;fill:currentColor;display:block}

.support-txt{flex:1 1 auto;min-width:0}
.support-mod{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:4px;
}
.support-txt b{display:block;font-weight:600;font-size:1rem;line-height:1.35}
.support-desc{display:block;margin-top:4px;font-size:.86rem;color:var(--ink-soft);line-height:1.5}

.support-poids{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--ink-faint);
  white-space:nowrap;
}
@media(max-width:560px){
  .support > a{align-items:flex-start}
  .support-poids{display:none}
}

.supports-vide{
  margin-top:clamp(28px,4vw,40px);
  max-width:60ch;
  color:var(--ink-soft);
}

.sortie{
  margin-top:clamp(36px,5vw,56px);
  padding-top:20px;
  border-top:1px solid var(--line);
  max-width:60ch;
}
.sortie a{font-size:.92rem;display:inline-block;padding-block:3px}
.sortie span{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-faint)}


/* ------------------------------------------------------------------
   17. Page de thématique
   ------------------------------------------------------------------ */

.theme-corps{padding-block:clamp(28px,4vw,44px) 0;max-width:68ch}

/* L'encadré sur l'intelligence artificielle. Il est traité comme une
   pièce à part — pas une carte de plus — parce que c'est le seul bloc
   qui revient à l'identique sur les huit pages, et qu'il doit se
   reconnaître d'un coup d'œil. */
.theme-ia{
  margin-block:clamp(34px,5vw,54px);
  max-width:68ch;
  padding:clamp(24px,3vw,32px);
  background:var(--block);
  color:var(--on-block);
  border-left:4px solid var(--magenta);
}
.theme-ia h2{
  font-family:var(--body);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-block);
  opacity:.72;
  margin-bottom:16px;
}
.theme-ia p{font-size:1rem;line-height:1.7}
.theme-ia p + p{margin-top:14px}
.theme-ia-note{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(254,254,254,.18);
  font-size:.85rem;
  opacity:.72;
}

/* Une grille, pas une bande : sur une page de thématique les projets
   se comparent, ils ne défilent pas. */
/* auto-fit et non auto-fill : avec trois projets sur une rangée de
   quatre, auto-fill garde la piste vide et laisse une case grise en
   bout de ligne. auto-fit l'efface et répartit la largeur. */
.grille-projets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.grille-projets .work{flex:1 1 auto}

.themes-liens{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.themes-liens a{
  display:block;
  padding:20px 22px;
  background:var(--paper);
  height:100%;
  text-decoration:none;
  color:inherit;
}
.themes-liens a:hover{background:var(--surface-2)}
.themes-liens a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.themes-liens b{display:block;margin-top:8px;font-weight:600;font-size:1rem;line-height:1.35}

/* La carte de l'accueil devient cliquable : le lien prend la place du
   titre sans changer la hiérarchie, et toute la carte réagit. */
.bande-ruban.dom article h3 a{color:inherit;text-decoration:none}
.bande-ruban.dom article h3 a::after{content:"";position:absolute;inset:0}
.bande-ruban.dom article{position:relative}
.bande-ruban.dom article:hover{background:var(--surface-2)}
.bande-ruban.dom article:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

/* Le chapô existe aussi dans le corps d'une page : la première phrase
   d'un texte long mérite le même traitement qu'un sous-titre. */
.entry-content .chapo{font-size:1.12rem;line-height:1.65;color:var(--ink-soft);max-width:62ch}


/* ------------------------------------------------------------------
   18. Réalisations : archive et page de projet
   ------------------------------------------------------------------ */

/* Dans l'archive, toute la carte est cliquable. Le lien enveloppe le
   contenu plutôt que de se limiter au titre : sur une grille de douze
   projets, viser un titre de trois mots au doigt est pénible. */
.work-lien{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.work-lien > :not(.work-vignette):not(.work-patch){margin-inline:22px}
.work-lien h2{
  font-family:var(--body);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:0;
  margin:9px 22px;
}
.work-lien p{font-size:.89rem;color:var(--ink-soft);line-height:1.5}
.work-lien .role{margin-top:20px}
.work-lien:hover{background:var(--surface-2)}
.work-lien:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Le titre cliquable des cartes en bande, sur l'accueil et sur une
   page de thématique. Même mécanique que les thématiques : le lien
   couvre la carte sans casser la hiérarchie des titres. */
.work h3 a{color:inherit;text-decoration:none}
.work h3 a::after{content:"";position:absolute;inset:0}
.work{position:relative}
.bande .work:hover,
.grille-projets .work:hover{background:var(--surface-2)}
.work:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

.projet-visuel{
  margin:clamp(24px,4vw,40px) 0 0;
  border:1px solid var(--line);
  background:var(--surface-2);
}
/* Le visuel d'un projet est plafonné : les maquettes sont en 16/9, mais
   une capture d'écran verticale téléversée un jour de fatigue occuperait
   sinon trois écrans. object-fit:contain la laisse entière. */
.projet-visuel img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(70vh,640px);
  object-fit:contain;
}

/* Même raison que pour les vignettes : un logo garde ses proportions et
   son fond clair, et n'occupe pas la hauteur d'une maquette. */
.projet-visuel--logo{
  background:#fff;
}
.projet-visuel--logo img{
  max-height:min(38vh,300px);
  padding:clamp(20px,4vw,44px);
}

/* Le texte d'introduction de l'archive des réalisations : une mesure de
   lecture, pas la pleine largeur de la grille de cartes. */
.archive-intro{
  max-width:74ch;
  margin-block:clamp(20px,3vw,32px);
  display:grid;
  gap:14px;
}
.archive-intro p{color:var(--ink-soft);font-size:1rem;line-height:1.65}

/* Le lien vers le site du client, juste sous le chapô d'une fiche. La
   note « ouvre dans un nouvel onglet » n'est pas décorative : un lien
   qui change de contexte sans le dire est un défaut d'accessibilité
   (WCAG 3.2.5). Elle est lisible par les lecteurs d'écran et discrète à
   l'œil. */
.entry-content .projet-lien-site{
  margin-top:18px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.entry-content .projet-lien-site a{
  font-weight:600;
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.entry-content .projet-lien-note{color:var(--ink-faint);font-size:.86rem}

/* Les schémas : même emprise que les photographies, mais sans bordure —
   le fichier porte déjà son cadre et son fond. */
.entry-content .projet-schema{
  margin-block:clamp(22px,3.5vw,34px);
  max-width:none;
}
.entry-content .projet-schema img{
  display:block;
  width:100%;
  height:auto;
}
.entry-content .projet-schema figcaption{
  margin-top:10px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink-faint);
  max-width:62ch;
}

/* Les photographies posées dans le corps d'une fiche de projet. La
   légende porte l'information que l'alternative ne doit pas porter :
   l'alternative décrit ce qu'on voit, la légende dit ce qu'il faut en
   retenir. */
.entry-content .projet-photo{
  margin-block:clamp(22px,3.5vw,34px);
  max-width:none;
}
.entry-content .projet-photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
.entry-content .projet-photo figcaption{
  margin-top:10px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink-faint);
  max-width:62ch;
}

.projet-themes{
  margin-block:clamp(28px,4vw,44px);
  padding-top:24px;
  border-top:1px solid var(--line);
  max-width:72ch;
}
.projet-themes h2{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
}
.projet-themes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.projet-themes a{
  display:inline-block;
  padding:7px 13px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:.86rem;
  text-decoration:none;
  color:var(--ink);
}
.projet-themes a:hover{background:var(--accent-soft);border-color:var(--accent)}

.projet-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-block:clamp(30px,4vw,48px) clamp(48px,7vw,84px);
  padding-top:24px;
  border-top:1px solid var(--line);
}
.projet-nav a{text-decoration:none;color:inherit;max-width:32ch}
.projet-nav span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.projet-nav b{display:block;margin-top:4px;font-weight:600;font-size:.95rem;line-height:1.35}
.projet-nav .suivant{text-align:right}
.projet-nav .toutes{
  display:inline-block;
  padding-block:3px;
  font-size:.86rem;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:620px){
  .projet-nav{display:grid;justify-content:stretch}
  .projet-nav .suivant{text-align:left}
}

/* ------------------------------------------------------------------
   La page de contact

   Deux colonnes : à gauche ce qu'il faut dire selon la demande, à
   droite le formulaire. Sur téléphone le texte passe devant, parce
   qu'il change ce qu'on écrit dans le message.

   Le leurre antispam n'est pas en display:none — certains robots
   écartent ce qui est masqué ainsi. Il est sorti du flux et sorti de
   l'écran, ce qui le laisse dans le document sans le montrer.
   ------------------------------------------------------------------ */
.contact-grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);
  align-items:start;
  margin-block:clamp(28px,4vw,44px) clamp(48px,7vw,84px);
}
.contact-texte{max-width:52ch}
.contact-texte .chapo{color:var(--ink-soft);font-size:1.06rem;margin-bottom:8px}
.contact-texte h2{font-size:clamp(1.12rem,1.7vw,1.3rem);margin-top:30px;margin-bottom:8px}
.contact-texte p{font-size:.97rem}

.formulaire{
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px);
  background:var(--surface-2);
  border:1px solid var(--line);
}
.formulaire .champ{margin:0 0 18px}
.formulaire .champ-paire{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
}
.formulaire label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.formulaire label em{font-style:normal;font-weight:400;letter-spacing:.06em;text-transform:none}
.formulaire input,
.formulaire select,
.formulaire textarea{
  width:100%;
  font-family:inherit;
  font-size:.97rem;
  line-height:1.5;
  padding:11px 12px;
  border:1.5px solid var(--ink-faint);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
}
.formulaire textarea{resize:vertical;min-height:170px}
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.formulaire .btn{width:100%;justify-content:center}
.formulaire .mention{
  margin:16px 0 0;
  font-size:.8rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.formulaire .mention a{color:var(--accent)}
.contact-form-bloc .alerte{margin-top:0;margin-bottom:20px;max-width:none}
.contact-form-bloc .alerte p{margin:0 0 6px;font-weight:600}
.contact-form-bloc .alerte ul{margin:0;padding-left:18px}
.contact-form-bloc .alerte li{margin-top:4px}

/* Le bouton bleu nuit posé sur le fond d'un formulaire disparaît en
   thème sombre : 1,01 de contraste entre les deux aplats, alors que la
   règle 1.4.11 du WCAG en demande 3 pour la limite d'un composant. Le
   texte blanc reste lisible, mais le bouton ne se voit plus comme un
   bouton. Un liseré --brand règle les deux thèmes d'un coup : en clair
   il vaut la couleur du bouton, donc il ne se voit pas ; en sombre il
   devient périwinkle et détache la forme. */
.formulaire .btn-c,
.porte .btn-c{box-shadow:inset 0 0 0 1.5px var(--brand)}

.leurre{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Une confirmation se voit, et dit ce qui se passe ensuite. */
.succes{
  margin-block:0 clamp(24px,3vw,36px);
  padding:16px 18px;
  background:var(--surface-2);
  border-left:3px solid var(--brand);
  font-size:.98rem;
  line-height:1.6;
}

@media(max-width:900px){
  .contact-grille{grid-template-columns:minmax(0,1fr)}
  .contact-texte{max-width:62ch}
}
@media(max-width:520px){
  .formulaire .champ-paire{grid-template-columns:minmax(0,1fr)}
}

/* Portrait dans une page de texte ------------------------------------
   Le flottant laisse la prose s'enrouler autour de la photo plutôt que
   de couper la page en deux colonnes : un texte de six cents mots dans
   une colonne de 60 % devient illisible. Le clearfix évite qu'un
   flottant plus haut que son texte déborde sur le pied de page. */
.entry-formateur .entry-content::after{content:"";display:block;clear:both}

.portrait-page{
  float:right;
  width:min(280px,38%);
  margin:.35rem 0 22px 30px;
}

@media(max-width:760px){
  .portrait-page{
    float:none;
    width:100%;
    max-width:240px;
    margin:0 0 26px;
  }
}