/* =========================================================================
   CFDP — Système de design
   =========================================================================
   Couleurs de marque réelles : bleu #1A4368, jaune #FFCC00.
   Le jaune est réservé à un usage précis : marquer les blocs de champs
   SPÉCIFIQUES à un type de formulaire (AADR/ASDR/CC), le bleu restant
   pour les 4 blocs communs à tous les types - voir .groupe-champs plus
   bas. Jamais utilisé de façon décorative ailleurs.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Couleurs --- */
  --ink: #14232E;
  --ink-soft: #4B5D68;
  --paper: #F5F7F7;
  --paper-raised: #FFFFFF;
  --blue: #1A4368;
  --blue-dark: #102E48;
  --blue-tint: #E7EDF2;
  --yellow: #FFCC00;
  --yellow-dark: #F2C200;
  --yellow-tint: #FFF7DB;
  --line: #DDE3E0;
  --line-soft: #EBEFED;
  --danger: #B3261E;
  --danger-tint: #FBEAE9;

  /* Urgence (conservées telles quelles, harmonisées) */
  --urg-surveiller: #2196F3;
  --urg-ulterieur: #6EA83A;
  --urg-rapide: #E0A400;
  --urg-urgence: #E0642A;
  --urg-crise: #B3261E;

  /* --- Typo --- */
  --serif: 'Lora', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Espacement --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius: 6px;
  --radius-sm: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--blue);
  margin: 0 0 var(--sp-2);
}

/* =========================================================================
   Bandeau de connexion + en-tête de page
   ========================================================================= */
a.tierhead {
    flex-basis: 140px;
}
.connect {
       display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    color: #fff;
    background: #ffffff;
    border-bottom: 5px solid #1a4368;
    align-items: center;
    flex-wrap: nowrap;
}
.connect > div {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
}



.icohome.icohome {
 height: 32px;
    width: auto;
    vertical-align: middle;
    fill: var(--blue);
		    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}

a.homelink:hover svg.icohome {
 fill: #fc0;
}


.deconnect {
     color: var(--blue);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #fc0;
    border-radius: 20px;
    padding: 8px 16px;text-align: center;
    font-weight: bold;
	    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}
.deconnect:hover { background: #fc0; }

.header {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  margin: 0 auto;    text-align: center;
	   
}


.wrapptout {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  margin: 0 auto;  
	   
}

/* Pages de formulaire et cartes de connexion enveloppées par .wrapptout : le
   wrapper porte déjà les marges latérales et le rythme vertical. On retire
   ceux du formulaire / de la carte pour ne pas les cumuler (sinon 48px de
   marge de chaque côté, pénalisant sur mobile). */
.wrapptout > form.aadr_form,
.wrapptout > form.asdr_form,
.wrapptout > form.cc_form {
  padding: 0 0 var(--sp-5);
}
.wrapptout > .row.part1,
.wrapptout > .row.part12 {
  margin: 0 auto var(--sp-2);
}





img.brandlogo {
     width: 140px;
    margin: 6px;
}


.header h1 {
  font-size: 26px;
  font-weight: 600;
  word-break: break-word;
}
.header p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}
.header .process,
.header .addform,
.header .expxls {
  display: inline-block;
  margin: var(--sp-2) 6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
	    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}
.header .addform, .header .process {
  background: var(--blue);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.header .process {
  background: #d0d0d1; color:var(--blue);

}

.header .addform:hover {     background: #fc0;  color: var(--blue); }
.header .process:hover,
.header .expxls:hover { background: var(--blue); color:#fff;}

.alert {
    margin: var(--sp-3) 0;
  padding: 10px 14px;
  background: var(--yellow-tint);
  border-left: 3px solid var(--yellow-dark);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
}

/* Alerte d'erreur de validation (liste des champs à corriger) */
.alert.alert-erreur {
  background: var(--danger-tint);
  border-left-color: var(--danger);
}
.alert.alert-erreur ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
}

/* Champ en erreur : libellé, bordure et fond signalés en rouge, message
   précis juste dessous. */
.champ-erreur > label,
.champ-erreur .checkbox-label span {
  color: var(--danger);
}
.champ-erreur input:not([type=checkbox]),
.champ-erreur select,
.champ-erreur textarea {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.champ-erreur input:focus,
.champ-erreur select:focus,
.champ-erreur textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-tint);
}
.erreur-msg {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
}

.footer {
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
}
.footer img {    max-width: 120px; }

.footermentions {
    text-align: center;
    padding: var(--sp-5);
    font-size: 12px;
}

.footermentions a {
    color: #818181;
    text-decoration: none;
}

.footermentions a:hover {
    color: #4a4a4a;
    text-decoration: none;
}


/* =========================================================================
   Formulaires — structure générale (ajouter.php / editer.php)
   ========================================================================= */

form.aadr_form,
form.asdr_form,
form.cc_form {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-7);
}

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.quarante { flex: 1 1 260px; }
.soixante { flex: 2 1 320px; }
.paddright { padding-right: 0; }
.margd { margin-bottom: var(--sp-3); }

label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}



.aadr_contact_dates > label, 
.asdr_contact_dates > label, 
.cc_contact_dates > label, 
.aadr_autre > label, 
.asdr_autre > label, 
.cc_autre > label, 
.aadr_solutions > label, 
.asdr_solutions > label, 
.cc_solutions > label, 
.aadr_supports_communication > label, 
.asdr_supports_communication > label, 
.cc_supports_communication > label, 
.aadr_soutiens > label, 
.asdr_soutiens > label, 
.cc_soutiens > label, 
.aadr_contexte > label, 
.asdr_contexte > label, 
.cc_contexte > label, 
.aadr_chiffrage > label, 
.asdr_chiffrage > label, 
.cc_chiffrage > label, 
.aadr_self_communication > label, 
.asdr_self_communication > label, 
.cc_self_communication > label, 
.aadr_description_probleme > label, 
.asdr_description_probleme > label, 
.cc_description_probleme > label, 
.aadr_decouverte_prise_parole > label, 
.asdr_decouverte_prise_parole > label, 
.aadr_url_prise_parole > label, 
.asdr_url_prise_parole > label, 
.aadr_responsabilite > label, 
.asdr_responsabilite > label, 
.cc_responsabilite > label 
{ display: none; }










.wrapp {
  width: 100%;
}

input[type=text],
input[type=date],
input[type=email],
input[type=tel],
input[type=password],
input[type=file],
select,
textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}
textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}
input[type=checkbox] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--blue);
}






.dt-layout-row select {
    width: auto!important;    margin-right: 5px;
}


.dt-layout-row label {
    display: inline-block!important; 
}






/* Case à cocher (type_saisie = 'case_a_cocher') : case + libellé sur
   une seule ligne, tout le bloc cliquable, quand elle est éditable. */
.champ-case-a-cocher {
  margin-bottom: var(--sp-3) !important;
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
}
.checkbox-label input[type=checkbox] {
  margin: 3px 0 0;
  flex-shrink: 0;
}
/* Rendu lecture seule ("Oui"/"Non") : reste cohérent avec les autres
   champs en lecture seule (voir .champ-dynamique span plus bas). */
.champ-case-a-cocher > label:not(.checkbox-label) {
  display: inline;
  margin-right: 8px;
}

em {
  display: block;
  font-size: 12px;
  color: #a9a9a9;
  font-style: normal;
  margin-top: 4px;
}

/* =========================================================================
   Bloc de champs — élément signature
   -------------------------------------------------------------------------
   Bleu = bloc commun à tous les types. Jaune = bloc spécifique à un seul
   type (AADR/ASDR/CC). La couleur porte un sens, ce n'est jamais une
   alternance décorative.
   ========================================================================= */

.groupe-champs {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}

/* Blocs spécifiques à un type (nommés d'après le bloc catalogue), plus
   "Identité" - bloc commun mais désormais renseigné par le user, donc
   traité visuellement comme les blocs spécifiques. */
.groupe-champs.aadr_specifique,
.groupe-champs.asdr_specifique,
.groupe-champs.cc_specifique,
.groupe-champs.identite {
  border-left-color: var(--yellow-dark);
}

/* "Interlocuteur auprès de l'assuré" et "Interlocuteur CFDP" côte à
   côte plutôt que l'un sous l'autre - ce sont deux blocs frères
   consécutifs dans le HTML (aucun changement PHP nécessaire).
   float plutôt qu'inline-block/inline-flex : ces deux affichages
   laissent un espace invisible entre les deux div (dû au retour à la
   ligne dans le code source), qui suffit à faire dépasser les 100% et
   renvoyer le second bloc à la ligne suivante. float n'a pas ce
   problème. */
.groupe-champs.interlocuteur_assure,
.groupe-champs.interlocuteur_cfdp {
  display: block;
  float: left;
  width: calc(50% - 8px);
  margin-bottom: var(--sp-4);
}
.groupe-champs.interlocuteur_assure {
  margin-right: 16px;
}
/* Force ce qui suit à repartir sous les deux blocs flottants, plutôt
   que de remonter à leur côté. */
.groupe-champs.interlocuteur_cfdp + * {
  clear: both;
}

.champ-dynamique {
  margin-bottom: var(--sp-4);
}
.champ-dynamique:last-child { margin-bottom: 0; }







.champ-dynamique.sinistre, 
.identite_assure,
.identite_tel,
.identite_email, 
.identite_forme_juridique,
.identite_siren, 
.date_effet_contrat,
.numero_contrat_cfdp, .date_declaration_sinistre,
.date_constatation_mise_en_cause {
    width: 50%;
    display: inline-flex;
    flex-direction: column;
}

.date_effet_contrat, .numero_contrat_cfdp,
.champ-dynamique.sinistre, 
.identite_tel,
.identite_forme_juridique,
.date_constatation_mise_en_cause {
    width: calc(50% - 15px);
    margin-right: 10px;
}


.identite_ville, 
.identite_code_postal {
    width: 50%;
    display: inline-flex;
    flex-direction: column;
    width: 220px;
    margin-right: 10px;
}


.identite_ville {
    width: calc(100% - 235px);
    margin-right: 0;
}























/* Titres/sous-titres (type_saisie = 'titre' / 'sous_titre') */
p.titre {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--ink);
  margin: var(--sp-2) 0 var(--sp-3);
}
p.sous_titre {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: -4px 0 var(--sp-3);
  
}
/* Textes/titres libres (CFDP_type_elements_texte) */
.titre-libre {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  margin: var(--sp-2) 0 var(--sp-2);
}
.texte-libre {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-3);
  max-width: 70ch;
}

/* =========================================================================
   Lecture seule (rôle "user" sans droit d'édition sur un champ)
   ========================================================================= */

.lecture-seule {
  max-width: 980px;
  margin: 0 auto var(--sp-5);
  padding: 0 var(--sp-5);
}
.lecture-seule .line label {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: inline;
  margin-right: 6px;
}
.lecture-seule .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 0 8px 10px;
  border-left: 2px solid var(--line);
  margin-bottom: var(--sp-2);
}
.champ-dynamique span {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--line);
}

/* =========================================================================
   Fil de discussion (type_saisie = 'zone_texte_fil')
   ========================================================================= */

.champ-fil { max-width: 640px; }

.fil-entree {
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.fil-entete {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.fil-entete strong { color: var(--ink); }
.fil-contenu { font-size: 14px; }

.champ-fil textarea {
  border-style: dashed;
  margin-top: var(--sp-2);
}

/* =========================================================================
   Champs de type "fichier"
   ========================================================================= */

.champ-fichier { max-width: 560px; }

.fichiers-existants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.imgwrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.imgwrap img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--blue-tint);
  display: block;
}
.img_div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.img_div:hover { text-decoration: underline; }

.imgwrap .delete {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}
.imgwrap .delete:hover { color: var(--danger); }
a.delete {
  color: var(--danger);
  font-size: 12.5px;
  text-decoration: none;
}
a.delete:hover { text-decoration: underline; }

.input-fichier-champ {
  font-size: 13px;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.wrappbutons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.btn1,
button[type=submit],
.savebrouillon,
.btndelete {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  margin: var(--sp-2) var(--sp-3) 0 0;
  transition: background .12s ease, border-color .12s ease;
}

.btn1 {
  background: var(--blue);
  color: #fff;
	    flex-basis: 70%;
}

.form_user .btn1 {
	   flex-basis: 100%;
}
.editer .btn1, .editer .savebrouillon {
    padding: 20px;
}



.btn1:hover { background: var(--blue-dark); }








.savebrouillon {
	   flex-basis: 30%;
  color: var(--blue);
  border-color: var(--blue);    background: #dce3e9;
}
.savebrouillon:hover { background: var(--blue-tint); }

.btndelete {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btndelete:hover { background: var(--danger-tint); }

/* =========================================================================
   Tableaux de bord (admin.php, admin-archives.php, user.php)
   ========================================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
/*  background: var(--paper-raised);*/
}
table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  white-space: nowrap;
}
table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
table .left { text-align: left; }

/* Colonne "Urgence" : le fond de couleur est posé en inline style par
   urgenceColor() (catalogue.php) - on adoucit juste le rendu ici. */
table td[style*="background-color"] {
  font-weight: 600;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}

table a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
table a:hover { text-decoration: underline; }

/* Contrôles générés par DataTables (nombre d'éléments à afficher,
   recherche) - sans ceci, ils héritent de la règle générale
   "select { width: 100%; }" / "input { width: 100%; }" pensée pour
   les formulaires, avec un rendu étiré incohérent selon la page. */
.dataTables_length select {
  width: auto;
  display: inline-block;
  padding: 4px 8px;
}




.dataTables_filter input {
  width: auto;
  display: inline-block;
}

.arcihveslink {
  display: inline-block;
  margin: var(--sp-4) var(--sp-5);
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: none;
}
.arcihveslink:hover { text-decoration: underline; }

/* Menu du bas de page (logs, utilisateurs, centres - alterbuzz/admincentre),
   affiché par footer.php. Reprend l'aspect qu'il avait dans admin.php, où
   un <style> local complétait ces règles. */
.menulinktologs {
  text-align: center;
  color: #9e9e9e;
  padding: 10px;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
}
.linktologs {
  display: inline;
  text-align: center;
  color: #9e9e9e;
  font-size: 12px;
  text-decoration: none;
}
.linktologs:hover { color: var(--blue); }

/* =========================================================================
   Connexion / mot de passe (index.php, forgotpass.php)
   ========================================================================= */

.row.part1,
.row.part12 {
  max-width: 420px;
  margin: var(--sp-6) auto;
  padding: var(--sp-6) var(--sp-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.connector .line {
  display: block;
  position: relative;
  margin-bottom: var(--sp-4);
}

.connector .g-recaptcha { margin: 0 auto; }

.connector .btn.btn1 {
  width: 100%;
  text-align: center;
  margin: var(--sp-2) 0;
}

.connector em {
  text-align: center;
  margin-top: var(--sp-2);
}

.forgotpass {
  display: block;
  text-align: center;
  margin-top: var(--sp-4);
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
}
.forgotpass:hover { text-decoration: underline; }

/* Bouton "afficher le mot de passe" - simple icône, positionnée dans
   le champ plutôt que dans le flux (fonctionne que .line soit en
   colonne ou non). */
#showpass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: .5;
}
#showpass::before {
  content: '\1F441';
  font-size: 15px;
  line-height: 20px;
}
#showpass:hover { opacity: .85; }

.alert.generatepass {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: var(--sp-4);
}
.alert.generatepass strong { color: var(--blue-dark); }

/* Indicateur de complexité du mot de passe */
#message {
  margin-top: var(--sp-3);
  display: grid;
  gap: 4px;
}
#message p {
  margin: 0;
  font-size: 12.5px;
  padding-left: 20px;
  position: relative;
  color: var(--ink-soft);
}
#message p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
}
#message p.valid {
  color: #2E7D32;
}
#message p.valid::before {
  border-color: #2E7D32;
  background: #2E7D32;
}
#message p b { font-weight: 600; }

/* =========================================================================
   Outils internes — gestion des comptes/centres, logs, liste IP
   ========================================================================= */

/* Bouton de suppression en ligne dans un tableau (gestion-utilisateurs.php,
   centre788cdsyjo5.php) - distinct de .btndelete (page dossier), plus
   discret puisqu'il vit dans une cellule dense. */
.deletebutton {
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.deletebutton:hover { background: var(--danger-tint); }

/* Colonnes tronquées avec info complète au survol (URL, User-Agent -
   admin-logsview.php, admin-logsviewconnect.php). */
.tdlimite {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  cursor: help;
}

/* Petits formulaires d'ajout/édition (centre, utilisateur) au-dessus
   du tableau principal. */
#tabmaj input[type=text],
#tabmaj input[type=email] {
  min-width: 120px;
}

/* Liste IP (writeIPS.php) : grande zone de texte libre plutôt qu'un
   champ de formulaire classique. */
.line.nomarg { margin-bottom: var(--sp-2); }
textarea.small {
  min-height: 260px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* "Interlocuteur assuré"/"Interlocuteur CFDP" : repasse en pleine
   largeur avant que les 5 champs de chaque bloc ne deviennent trop
   étroits (seuil dédié, plus large que le point de rupture général
   ci-dessous). */
@media (max-width: 900px) {
  .groupe-champs.interlocuteur_assure,
  .groupe-champs.interlocuteur_cfdp {
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .connect { padding: var(--sp-2) var(--sp-4); }
  .header, .lecture-seule, form.aadr_form, form.asdr_form, form.cc_form {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .header h1 { font-size: 21px; }
  .groupe-champs { padding: var(--sp-3) var(--sp-4); }
  .quarante, .soixante { flex: 1 1 100%; }
  .btn1, .savebrouillon, .btndelete {
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
  .row.part1, .row.part12 {
    margin: var(--sp-4) var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
}