/* Pages de présentation des produits (Master, Licence) : mêmes repères que la page du CRFPA. */
:root{
  /* --nuit, --accent et --lien sont posés par chaque page d'après le fichier de marque. */
  --nuit:#14275A; --rouge:#B3261E; --or:#F2A23A;
  --fond:#F7F4EE; --carte:#FDFBF7; --releve:#EFE9DF; --encre:#1F1B16; --gris:#5E554A; --trait:rgba(31,27,22,.1);
  --sur-nuit:rgba(255,255,255,.72); --trait-nuit:rgba(255,255,255,.1); --courbe:cubic-bezier(.22,1,.36,1);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{--abysse:color-mix(in srgb,var(--nuit) 58%,#000);margin:0;font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--encre);background:var(--fond);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main p a,main li a{color:var(--lien,var(--nuit))}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.contenu{width:min(1160px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:8px}
.masque{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;border-radius:8px;font:600 1rem var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background-color .16s var(--courbe),transform .16s var(--courbe)}
.bouton:active{transform:scale(.98)}
.bouton-or{background:var(--accent,var(--or));color:#16130C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bouton-or:hover{filter:brightness(1.08)}
.bouton-trait{color:var(--blanc,#fff);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bouton-trait:hover{background:rgba(255,255,255,.12)}

.entete{background:var(--abysse);color:#fff;border-bottom:1px solid var(--trait-nuit)}
.entete .contenu{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Logotype : caractères à empattements, « Lawy » en italique gras à la couleur du produit, puis le nom du produit. */
.logotype{font-family:var(--serif);font-size:1.3125rem;font-weight:400;letter-spacing:-.01em;white-space:nowrap}.logotype b{font-style:italic;font-weight:700;color:var(--accent,var(--or))}
.marque em{font:600 .6875rem var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,var(--or));margin-left:8px}

.marque img{width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.entete nav{display:flex;align-items:center;gap:24px;font-size:.9375rem}
.entete nav a.lien{color:rgba(255,255,255,.82);text-decoration:none}
.entete nav a.lien:hover{color:#fff}
.entete .bouton{padding:8px 16px;font-size:.9375rem}

.heros{background:var(--abysse);color:#fff;padding:96px 0}
.heros .contenu{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center}
.heros h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;max-width:13em}
.heros .chapo{font-size:1.1875rem;color:var(--sur-nuit);max-width:36rem}
.heros img{width:min(320px,80%);margin-inline:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.gages{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.875rem;color:rgba(255,255,255,.72)}
.gages li::before{content:"✓";margin-right:8px;color:var(--accent,var(--or));font-weight:700}
/* Une dernière case seule sur sa ligne prend toute la largeur. */
@media (min-width:981px){.grille .case:last-child:nth-child(3n+1){grid-column:1/-1}}
.note{margin-top:16px;font-size:.875rem;color:rgba(255,255,255,.6);max-width:36rem}

section{padding:96px 0}
.surtitre{display:inline-block;font-size:.9375rem;color:var(--rouge);font-weight:500}
.surtitre::before{content:"§ ";font-family:var(--serif);color:var(--or)}
.heros .bouton-or,.final .bouton-or,.entete .bouton-or{background:var(--accent,var(--or))}
.titre-section{max-width:46rem;margin:0 auto 56px;text-align:center}
.titre-section h2{font-size:clamp(2rem,4.4vw,3.25rem);margin:16px 0;color:var(--nuit)}
.titre-section p{color:var(--gris);font-size:1.125rem}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:32px}
.case h3{font-size:1.375rem;color:var(--nuit);margin-bottom:8px}
.case p{color:var(--gris);font-size:1rem}
.clair{background:var(--carte);border-block:1px solid var(--trait)}
.case.avenir{background:transparent;border-style:dashed}
.etat{display:inline-block;font-size:.8125rem;color:var(--gris);border:1px solid var(--trait);border-radius:6px;padding:2px 8px;margin-bottom:12px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo h2{font-size:clamp(1.875rem,3.6vw,2.75rem);color:var(--nuit);margin:16px 0}
.duo p{color:var(--gris)}
.liste{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.liste li{background:var(--fond);border:1px solid var(--trait);border-radius:12px;padding:16px 20px;color:var(--gris)}
.liste b{display:block;color:var(--nuit)}

.final{background:var(--abysse);color:#fff;text-align:center}
.final h2{font-size:clamp(2rem,4.6vw,3.5rem);max-width:15em;margin-inline:auto}
.final p{color:var(--sur-nuit);max-width:36em;margin:20px auto 0;font-size:1.125rem}
.attente{max-width:520px;margin:32px auto 0}
.attente form{display:flex;gap:8px;background:rgba(255,255,255,.06);padding:4px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.attente input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;padding:12px 16px}
.attente input::placeholder{color:rgba(255,255,255,.6)}
.attente input:focus{outline:0}
.attente form:focus-within{box-shadow:inset 0 0 0 1px var(--accent,var(--or))}
.attente .retour{margin-top:12px;min-height:1.5em;font-weight:600;color:#FFD08A}
.attente small{display:block;margin-top:8px;color:rgba(255,255,255,.6);font-size:.875rem}
[hidden]{display:none!important}

footer{background:color-mix(in srgb,var(--nuit) 34%,#000);color:rgba(255,255,255,.62);padding:40px 0;font-size:.875rem}
footer .contenu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer a{color:rgba(255,255,255,.88)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}

@media (max-width:980px){
  .heros .contenu,.duo{grid-template-columns:1fr;gap:40px}
  .grille{grid-template-columns:1fr 1fr}
  .entete nav a.lien{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  /* En-tête : le logotype, le nom du produit et le bouton tiennent sur un écran de 360 px. */
  .logotype{font-size:1.125rem}
  .marque{gap:8px;min-width:0}
  .marque img{width:36px;height:36px}
  .marque em{margin-left:4px;letter-spacing:.1em}
  .entete .bouton{padding:8px 12px}
  section,.heros{padding:64px 0}
  .grille{grid-template-columns:1fr}
  .attente form{flex-direction:column}
  .actions .bouton{width:100%}
}